Kendo TreeView in grid display 'undefined'

Question

I had this kendo grid demo, and on outletID column, i want to use kendoTreeView with checkbox, so multiple selected outletID possible. But when edit it display undefined result, and the template that display outletName also not working. Appreciate your help

DEMO IN DOJO

GaloisGirl GaloisGirl · Accepted Answer · 2019-10-21T09:22:46

Your tree needs dataTextField and dataValueField set.

Your column template doesn't know where to look for the outletName. Kendo supports 1-N relationships, but I'm not aware of N-N.

The data in your template is the current row of the grid. For the first row, that would be {"id":"1","outletID":"LA2,LA3","accountName":"Data1"}. You need to process that data yourself. For instance:

template: "#= (data.outletID) ? data.outletID.split(',')
    .map(x => TreeData.find(y => y.outletID == x)['outletName']) : '' #"

For the editor, the value of a dropDownTree is an array. Your row has a string. You need to do two things:

1 . Init the editor's value in the function outletTree:

if (options.model) {
    ddt.value((options.model[options.field] || '').split(','))
}

2 . When the dropDownTree's value changes, update your grid row:

  change: e => {
    const value = e.sender.value();
    console.log(value)
    options.model.set(options.field, value.join(','))
  }

Here's an updated dojo: https://dojo.telerik.com/@GaloisGirl/oYEGerAK . The "Update" button doesn't work yet, probably because the dataSource must support edition. Here is how to do it on local data.

Kendo TreeView in grid display 'undefined'

1 Answers