asp.net mvc - SlickGrid not displaying SQL data in an MVC application -

this post on stackoverflow describes issue data sql not displaying in slickgrid in mvc application. having same issue. when navigate www.example.com/aqi/products/index, slickgrid displays, data article_creator column in sql not appear.

the web inspector network tab displays data in article_creator column sql should appear in slickgrid. in example, text "test" should appear in slickgrid.

in other post, solution check web inspector console errors. browsers web inspector console has no errors, unsure next.

controllers/appcontroller.cs

using system; using system.collections.generic; using system.data; using system.data.entity; using system.linq; using system.net; using system.web; using system.web.mvc; using aqi.models;  namespace aqi.controllers {     public class productscontroller : controller     {          public actionresult index()         {             return view(db.products.tolist());         }          public jsonresult getslickgriddata()         {             var slickgriddata = db.products.tolist();             var jsonresult = json(slickgriddata, jsonrequestbehavior.allowget);             jsonresult.maxjsonlength = int.maxvalue;             return jsonresult;         }     } } 

scripts/slickgridproducts.js

var grid; var columns = [     { id: "article_creator", name: "article_creator", field: "article_creator", width: 100 } ]; var options = {     editable: true,     enableaddrow: true,     enablecellnavigation: true,     asynceditorloading: false,     autoedit: false };  $(function () {     var slickdata = [];     $.getjson("/aqi/products/getslickgriddata", function (items) {         (var = 0; < items.length; i++) {             slickdata[i] = {                 article_creator: items[i].article_creator             };         }     });      grid = new slick.grid("#mygrid", slickdata, columns, options); }) 

view/products/index.cshtml

<link href="@url.content("~/content/slick.grid.css")" rel="stylesheet" type="text/css" /> <link href="@url.content("~/content/smoothness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" /> <script src="@url.content("~/scripts/slick.core.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/slick.grid.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/jquery-1.10.2.min.js")" type="text/javascript"></script> <script src="@url.content("~/scripts/slickgridproducts.js")" type="text/javascript"></script>  <div id="mygrid"></div> 

you need put grid initialization inside $.getjson callback since asynchronous. e.g.

$(function () {     var slickdata = [];     $.getjson("/aqi/products/getslickgriddata", function (items) {         (var = 0; < items.length; i++) {             slickdata[i] = {                 article_creator: items[i].article_creator             };         }        grid = new slick.grid("#mygrid", slickdata, columns, options);     }); }) 

or, if want show grid beforehand no data , refresh later after pulling data, then.

$(function () {     var slickdata = [];     grid = new slick.grid("#mygrid", slickdata, columns, options);      $.getjson("/aqi/products/getslickgriddata", function (items) {         (var = 0; < items.length; i++) {             slickdata[i] = {                 article_creator: items[i].article_creator             };         }         //set new data here , invalidate grid         grid.setdata(slickdata);         grid.invalidate();     }); }) 

note: noticed have 2 empty rows image. believe 1 valid array item , other new row since set enableaddrow:true. occur if have typos on column field property` or incorrect dataset.