I would like to know if the following approach is supported:
Define grid schema and columns and initialize with an empty array:
var dataSource = new kendo.data.DataSource({
data: [] // intentionally empty!
});
$("#grid").kendoGrid({
dataSource: dataSource,
schema: {
model: {
fields: {
arrive: {type: "number"},
depart: {type: "number"},
src: {type: "string"}
}
}
},
columns: [
{ field: "arrive", groupable: false, title: "arrive",width:88},
{ field: "depart", groupable: false, title: "depart",width:88},
{ field: "src", groupable: true, title: "src", width:44 }
]
etcetera
});
Then, after configuration/initialization, bind to the Change event:
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
function dataChanged() {
var grid = $("#grid").data("kendoGrid");
grid.refresh();
}
Then do this:
function populateDatasource(event, data) {
var grid = $('#grid').data('kendoGrid');
var parsedData = $.parseJSON(data);
grid.dataSource.data(parsedData);
}
which would trigger the changed event and refresh the grid. I am thinking that the observe pattern might have some trouble if the dataSource is initialized with an empty array.
I am not sure what you mean by observe pattern. But the grid can have an empty data source. Here is a demo: http://jsbin.com/izizut/1/edit
Your grid configuration is wrong. The schema setting is part of the data source configuration not the grid. You can find more information in the data source API reference.
Also there is no need to subscribe to the change event of the data source in this case. The grid is listening to it by default and will get refreshed automatically.