Search code examples
jsonslickgrid

SlickGrid is displayed but data is not populated in the grid


SlickGrid is displayed but data is not populated in the grid. It is good with direct ajax call but the problem with dataview please can any one help me

  var jqxhr = $.getJSON('http://localhost:50305/Service1.svc/json/Projects', function (data) {
                          for (var i = 0; i < data.length; i++) {
                                      slickdata[i] = {
                                          ProjectID: data[i].ProjectID,
                                          ProjectTypeID: data[i].ProjectTypeID,
                                          ProjectName: data[i].ProjectName,
                                      };
                                  }
                                  console.log("slickdata is" + slickdata);
                              dataView.onRowCountChanged.subscribe(function (e, args) {
                                      grid.updateRowCount();
                                      grid.render();
                                  });

                                  dataView.onRowsChanged.subscribe(function (e, args) {
                                      grid.invalidateRows(dataView.rows);
                                     grid.render();
                                  });

                                  dataView.beginUpdate();
                                  dataView.setItems(slickdata, "ProjectID");
                                  dataView.endUpdate();

                          dataView = new Slick.Data.DataView({ inlineFilters: true });
                        grid = new Slick.Grid("#teamGrid", dataView, columns, options);

Solution

  • If you want to use Dataview as you mentioned in a comment. You need couple of lines of code, and also need to add data to the dataview object. See the following:

    // create DataView & Grid object
    var dataView = new Slick.Data.DataView();
    var grid = new Slick.Grid("#myGrid", dataView, columns, options);
    
    // then bind data to the DataView object
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
    

    You can see a more complete example of DataView here: Example4-model


    EDIT
    Your question does not seem to have a unique id property inside your data, though SlickGrid specifically requires it and would throw an error in the console if you don't have that id. I usually prefer to fix this problem on the server side (PHP or whichever language you use). You could also add the id property via javascript something like this:

    for (var i = 0; i < data.length; i++) {
      data.id = data[i].ProjectID; // clone your ProjectID into a new 'id' property
    }
    
    // then bind data to the DataView object
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();