Refresh Kendo UI grid data by reading a variable

Question

Grid reads data from a javascript variable.

    $("#grid").kendoGrid({
    dataSource: {
        type: "text",
        data: jsvar,
        schema: {
            model: {
                fields: {
                    id: {type: "string", editable: false},
                    name: {type: "string"}
                }
            }
        },
        pageSize: 20
    },
    pageable: {
        input: true,
        numeric: true
    },
   //toolbar: [{text: "Add"}],
    columns: [
        {command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},


    ]
});

Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with

            jQuery("#grid").data("kendoGrid").dataSource.read();
            jQuery("#grid").data("kendoGrid").refresh();

The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data. This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update

Solution

If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:

grid.dataSource.data(jsvar);