kendo ui dropdownlist- How to do manual Cascading?

Question

So im currently trying to adapt some previous code to use with dynamic dropdownlists, the problem seems to be that the cascadeFrom property only takes an id. So i need to us

Answer 1

I find that using MVVM and HTML declarative binding is much simpler and looks a lot cleaner. Instead of initializing each Kendo UI control via JavaScript functions, you could harness the power of Kendo's declarative binding. It has its limitations, but the technique covers most use-cases. The power is hidden in data- attributes and the kendo.bind() method.

HTML:

JavaScript:

var items = [
  ['Apple', 'Orange', 'Pear'],
  ['Carrot', 'Lettuce', 'Spinach']
];

var vm = kendo.observable({
  type: 0,
  item: '',
  types: [{ id: 1, name: 'Fruits'}, { id: 2, name: 'Vegetables'}],
  items: [],
  typeChange: function(e) {
    var index = e.sender.dataItem().id - 1;
    this.set('items', items[index]);
  }
});

kendo.bind($('body'), vm);

Here is an example of the above code that implements manual cascading drop-down lists in JSBin: click here.