Slickgrid dynamic loading doesn't display (MVC 5)

Question

I have converted my datatable from my controller as such:

public string GetReportResults(int ID)
{
     UserInterface engine = new UserInterface();
     UserStandardReport rpt = engine.GetStandardReport(CreateLoggedInUser(), ID);
     DataTable dt = engine.GetQueryData(CreateLoggedInUser(), rpt);

     System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
     List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
     Dictionary<string, object> row;
     foreach (DataRow dr in dt.Rows)
     {
         row = new Dictionary<string, object>();
         foreach (DataColumn col in dt.Columns)
             row.Add(col.ColumnName, dr[col]);
         rows.Add(row);
     }

     return serializer.Serialize(rows);
 }

Returned data snippet: [{"Customer City":null,"Customer Address Line 1":null,"Customer Address Line 2":null,"Customer Name (Firm or Full Name)":"","Customer State":null,"Customer Zip":null},{"Customer City":null,"Customer Address Line 1":null,"Customer Address Line 2":null,"Customer Name (Firm or Full Name)":"1 Location","Customer State":null,"Customer Zip":null},{"Customer City":null,"Customer Address Line 1":null,"Customer Address Line 2":null,"Customer Name (Firm or Full Name)":"2 location","Customer State":null,"Customer Zip":null},{"Customer City":null,"Customer Address Line 1":null,"Customer Address Line 2":null,"Customer Name (Firm or Full Name)":"3 location","Customer State":null,"Customer Zip":null}]

In my view, I'm using this:

$(function () {

     var columnName;
     var columns = @Html.Raw(Json.Encode(Model.columns));

     for (var n=0; n< columns.length; n++)
     {
         columnName = columns[n];
         cols.push({
             id: columnName,
             name: columnName,
             field: columnName
         });
     }

     $.getJSON("/Home/GetReportResults", {ID: @Model.ID}).done(function(data){
         slickdata = data;
     });

     dataview = new Slick.Data.DataView({inlineFilters: true});
     grid = new Slick.Grid("#availableGrid", dataview, cols, options);

     dataview.beginUpdate();
     dataview.setItems(slickdata);
     dataview.endUpdate();
});

My Model.columns is a List that contains the column names {"Customer City","Customer Address Line 1","Customer Address Line 2","Customer Name (Firm or Full Name)","Customer State","Customer Zip"}. These will change based on the results returned.

Currently, I see my columns in the grid, but none of my data is displayed. I've double-checked Firebug. There are no errors. What am I missing for the grid?

Answer 1

Put the call to dataview.setItems(slickdata) inside the $.getJSON() callback.