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);
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();