Kendo UI, How to get a widget object from a DOM element when using MVVM?

Question

I made a kendo treeView in MVVM as indicated on this page: http://demos.kendoui.com/web/treeview/mvvm.html

Now I need to bind some events , and also use some APIs .

I think I will need to have a treeview object, and I need to somehow find it using the corresponding DOM element. How can this be achieved?

Answer 1

You can bind events in your markup using MVVM bindings. An example shows how to do this.

 data-bind="visible: isVisible, source: files, events: { select: onSelect } 

The code in the example shows the MVVM event binding structure. This is the easiest way to associate events with KendoUI MVVM. With the above code, they also provide an example of an onSelect-dependent method that processes the event. You can add additional event bindings, separated by commas.

 events: { select: onSelect, click: onClick } 

Then you need to add a method called onClick to your viewmodel code

 onClick: function(e) { //Do Something } 

If you want to get the DOM element and make calls to the widget from your Javascript code, you can use:

 var treeViewWidget = $("#treeview").data("kendoTreeView"); 

Make sure you do this AFTER you bind the viewmodel to the page. You will also need to modify the div in the example to include the Id attribute for convenient selection in the jQuery selector. The above code requires you to define your tree div as:

 <div id="treeview" class="files" data-role="treeview" data-drag-and-drop="true" data-text-field="name" data-spritecssclass-field="type" data-bind="visible: isVisible, source: files, events: { select: onSelect }"></div>