Vue state dose not sync with kendo datasource

Progress® Kendo® UI for Vue Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 23 Jun 2020 02:57 by icq

icq

Created on: 12 Jun 2020 06:54

Category: Kendo UI® for Vue

Type: Bug Report

Vue state dose not sync with kendo datasource

I have a kendo wrapper grid with local datasource pointing to vue state.
There is a button "Update" which will update the state so that the grid will be updated as well and it works.

But, if I firstly click the button "Test" (just only a same value assignment to state) and then click "Update", strangely it does not work so the grid has no change.
I finally found out the reason is that after clicked "Test" then "Update", the vue state updated BUT the kendo grid datasource won't (out of sync unexpectedly)
So the temp solution is I have to manually assign the state to the datasource so that the grid will be updated.

Repo: https://stackblitz.com/edit/dqsbeo

My question is why, after clicked 'Test', the kendo grid datasource became cached and out of sync with the vue state?
If I don't click 'Test', they do sync always.
Problem occur only when "same value assignment" to the state. If "different value assignment", no problem.

<div id="vueapp">
    <kendo-datasource ref="dsDS" :data="localDataSource"></kendo-datasource>
    <kendo-grid :data-source-ref="'dsDS'">
        <kendo-grid-column :field="'ProductID'"
                           :title="'ID'"
                           :width="40"></kendo-grid-column>
        <kendo-grid-column :field="'ProductName'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
    <input type="button" value="Test" @click="test" />
    <input type="button" value="Update" @click="update" />
</div>

new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]
    },
    methods: {
      test: function(e) {
        this.localDataSource = JSON.parse(JSON.stringify(this.localDataSource)); //same value assignment
        console.log('test');
      },
      update: function(e) {
        this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace the first object with second object
      },
    }
})

4 comments

icq

Posted on: 23 Jun 2020 02:57

Hi Ianko,

Yes. I also think somehow Vue turned off the reactive flag when 'same value assignment' was hit.

I reported this symptom to Vue too so waiting for their reply.

Thank you.

ADMIN

Ianko

Posted on: 22 Jun 2020 08:49

Hi,

I agree it is strange. I debugged the DataSource and for some reasons Vue seems to remove the DataSource observable properties of the data.

Regards,
Ianko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

icq

Posted on: 19 Jun 2020 04:19

Thank you for your explaination.

As my given example was simplified to use local kendo datasource but actually I am using remote kendo datasource with server side paging. So I have to keep to use kendo datasource for the grid.

Just wondering why problem only occur on "same value assignment" but not "different value assignment" e.g.

test: function(e) { //same value assignment ('update' function will have problem after executed 'test')
this.localDataSource = JSON.parse(JSON.stringify(this.localDataSource));
},
test2: function(e) { //different value assignment ('update' function works fine after executed 'test2')
let ds = JSON.parse(JSON.stringify(this.localDataSource));
ds[0]['ProductName'] = 'hello';
this.localDataSource = JSON.parse(JSON.stringify(ds));
}

Anyway I will use the temp solution to manually assign the state to kendo datasource.
My example with temp solution: https://stackblitz.com/edit/dqsbeo-le4due
Thanks.

ADMIN

Ianko

Posted on: 18 Jun 2020 13:06

Hello,

The way this is implemented is causes interactions with the observable properties of the DataSource utility vs the Vue observable's properties. This is a main limitation of the Kendo DataSource's usage and the wrappers concept in Vue. The reactivity should be used with the Kendo DataSource only as it is based on vanilla client-side logic and not based on the Vue reactivity. This is why we recommend going towards the native components, where native Vue reactivity is utilized properly.

However, there is an internal compatibility, but you should assign the data to the data-source of the grid and not to a kendo-datasource conponent. That way, the change is propagated to the main component and the actual DataSource is recreated with the new data. Here you are an example: https://stackblitz.com/edit/dqsbeo-81emw3?file=index.js.

Regards,
Ianko
Progress Telerik