[Vuejs]-Vue state does not sync with kendo datasource

by

0👍

Once the datasource is set in the data() object, and the kendo grid is bound, I wouldn’t try to edit the localDataSource object. The kendo grid gets your basic array and converts it into a kendo datasource with all the extended properties, so I would target that new object to make changes.

try something like below in your update method – if you can assign the grid an id through a wrapper attribute then the selector would be better than what i have here

    let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
    let data = gridDS.data();
    data.splice(0,1,data[1]);

btw the data method should return a new object otherwise you might have issues with duplicate components sharing the same object
so instead of

    data:{
        localDataSource:[1,2,3]
    }

i would do

    data(){
        return {
            localDataSource:[1,2,3]
        }
    }

0👍

Adding this as answer because comments won’t accommodate this much text:

If you do a data dump after the update() function:
console.table(this.localDataSource)
you will see that the localDataSource array is being updated correctly. But the kendo grid isn’t aware of it. It still has its own array of data. If you do a corresponding dump of the kendo data source, you will see it has not been synced

   let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
   let data = gridDS.data();
   console.table(data);

What I think is happening is this – since localDataSource is a property of data(), Vue observes any changes to its nested properties.
When it executes code ds[0]['ProductName'] = 'hello' Vue picks up the update, looks for dependencies on the object, and rebinds the kendo-grid component.

Leave a comment