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

Question

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

Now I need to bind some of the events and also make use of some APIs.

I think I will need to have the treeview object and I need to somehow find it using the corresponding DOM element. How could that be achieved?

Answer 1

You can bind events in your markup using MVVM bindings. The example shows how this can be done.

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

The code from the example shows the MVVM event binding structure. This is the easiest way to bind events with KendoUI MVVM. With the above code, they also give an example of the onSelect dependent method which handles the event. You can add more event bindings by separating them with commas.

events: { select: onSelect, click: onClick }

You then 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");

Be 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 an Id attribute for convenient selection in the jQuery selector. The above code requires you to define your treeview 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>