Binding existing Kendo grid to a new JSON object

Question

I have following kendoGrid on my page that on load receives JSON object from the specified URL.

But later i want to bind it to some other JSON data received from other source. Is there a way a can bind-refresh existing data containing grid with a new JSON object?

$('#grid').kendoGrid({
    sortable: true,
    groupable: true,
    scrollable: true,

    pageable: {
        pageSizes: 9
    },
    dataSource: {
        transport: {
            read: {
                url: "../Get/JsonData",
                dataType: "Json"
            }
        }
    },
    columns: [
        { field: "name", title: "Name", width: 100 },
        ... ...
    ]
});

CodingWithSpike CodingWithSpike · Accepted Answer · 2013-10-29T00:42:07

You could either replace all the data in the DataSource with:

var newData = [ "some", "data", "array" ];

var gridWidget = $('#grid').data("kendoGrid");
gridWidget.dataSource.data(newData);

Or you can give the grid a whole new DataSource (I recommend this approach):

var newData = new kendo.data.DataSource({
    data: [ "some", "data", "array" ]
});

var gridWidget = $('#grid').data("kendoGrid");
gridWidget.setDataSource(newData);

and of course newData in my example would just be whatever data is returned from your function.

Binding existing Kendo grid to a new JSON object

2 Answers