Grid auto-bind="false" issue

[Wayne Hiller]

I am saving a grid's column layout to localStorage in a beforeunload event. In the Vue mounted event I restore the column layout (once). To do this I have the grid's auto-bind set to false.

const opts = this.$refs.indexGrid.kendoWidget().getOptions();

-- set the column widths in opts.

this.$refs.indexGrid.kendoWidget().setOptions(opts);

After restoring the columns I call the data source read method to load the data (this.$refs.ds.kendoWidget().read()) but nothing happens. 

Does it have to do with the call to setOptions as options contains dataSource info.

 

[Georgi]

Hi Wayne,

If the grid is using the this.$refs.ds.kendoWidget() it should display the corresponding data. However, if the grid has its own dataSource it is expected that nothing happens after calling the read method of an another dataSource.

Could you please call the read method of the dataSource through the grid as follows and let me know if the grid displays the correct data?

this.$refs.indexGrid.kendoWidget().dataSource.read();

Regards,
Georgi
Progress Telerik

[Wayne Hiller]

I tried that, same result. I ended up reassigning the datasource.

const g = this.$refs.indexGrid.kendoWidget();
const ds = this.$refs.ds.kendoWidget();
let sort = null;

....

g.setDataSource(ds);
if (sort) {
     ds.sort(sort);
}
else {
     ds.read();
}

 

[Georgi]

Hello Wayne,

The described behavior might occur in case the options you are setting do not have a dataSource configuration. If opts.dataSource is a reference to the this.$refs.ds, then assigning the dataSource explicitly will not be necessary.

e.g.

opts.dataSource = this.$refs.ds.kendoWidget();
this.$refs.indexGrid.kendoWidget().setOptions(opts);


Regards,
Georgi
Progress Telerik

[Wayne Hiller]

What is a bit strange is that opts.dataSource does contain a reference to this.$refs.ds. 

[Georgi]

Hello Wayne,

Indeed if the opts.dataSource is a reference to the actual dataSource, the dataSource should be applied.

Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.


Regards,
Georgi
Progress Telerik

[Wayne Hiller]

It is working as I have it so I am not going to worry about it much. Besides I read this today from the Telerik Dev Blogs:

The biggest thing for our Vue.js components is the new native data grid that will drop with R1 2019. This is a component that is not based on our jQuery Grid and should have a natural fit in to any Vue.js app. There’s of course a slew of other features, but for details on those (and access to the native data grid) you’ll have to wait until the official release. 

 

I will probably give the new Grid a try.

 

[Georgi]

Hello Wayne,

Indeed our latest 2019 R1 release includes a native Vue Grid. You can test it in the link below:

• https://www.telerik.com/kendo-vue-ui/components/grid-native/

Regards,
Georgi
Progress Telerik

[Wayne Hiller]

Very interesting, I like it.  I know this is a sales/marketing question but I will ask anyway. Are there plans to eventually move all the Vue components to Native Vue? As much as I like jQuery, mixing it with Vue just feels wrong.

[Georgi]

Hi Wayne,

Currently we are focusing on the grid as it is the most popular widget. Based on the traction we will consider implementing the rest of the widgets.

You can find our roadmap in the following link:

• https://www.telerik.com/support/whats-new/kendo-ui/roadmap#vue.js-roadmap

Finally, I can suggest you to vote for the native Vue components in our feedback portal:

• https://feedback.telerik.com/kendo-jquery-ui/1360378-vue-native

Regards,
Georgi
Progress Telerik