Kendo wraper grid with columns name with .(dot) not working sorting functionality Vue.

[Rahul]

Hello All,

I am facing issue of sorting functionality in grid with vuejs.

In grid records are sorting in ascending/descending on click on column name.

But my column name is simple string but field is dot (.) separated value then it is not working.

e.g. - 

columnsDefinitions: [ {
    field: 'user.role.name',
    title: 'rolename',
},

where user.role.name is a key of JSON getting from back-end.

Error : -

Uncaught TypeError: Cannot read property 'role' of undefined
    at eval (eval at getter (kendo.core.js?38f6:4631), <anonymous>:3:15)
    at Array.eval (kendo.data.js?1f4d:994)
    at eval (kendo.data.js?1f4d:1031)
    at Array.sort (<anonymous>)
    at Query.order (kendo.data.js?1f4d:1546)
    at Query.orderBy (kendo.data.js?1f4d:1549)
    at Query.sort (kendo.data.js?1f4d:1567)
    at Function.Query.process (kendo.data.js?1f4d:1866)
    at init._queryProcess (kendo.data.js?1f4d:3914)
    at init.query (kendo.data.js?1f4d:3982)

[Veselin Tsvetanov]

Hello Rahul,

Using the "." in your field names would result in invalid JavaScript, i.e. you can't have a JavaScript object like:

var myObject = {
    user.role.name: someValue
}

Unfortunately, in VueJS you could not force Kendo to generate javascript that uses []-notation to reference the fields instead of dot-notation. Having that said, I am afraid that you should take care to avoid any dots in the items fields received from the remote source.

In case you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Progress Telerik