Binding Event To Other Ui Component's Function, In Kendo Mvvm

In Kendo UI, what is the best practice to reference another UI element's (widget) functionality; the MVVM way? For example, let's say I have both a grid and a button. I want the bu

Solution 1:

There is no best practice, unfortunately, and it's also hard to customize.

If you really want it, you could modify the binding code so it adds properties for the various widgets on the view model using an attribute (k-name in this case):

functionbind(dom, object) {
    object = kendo.observable(object);
    dom = $(dom);

    kendo.originalBind(dom, object);
    traverseChildren(object, dom[0]);
}

functiontraverseChildren(object, node) {
    var children = node.children;
    for (var idx = 0; idx < children.length; idx++) {
        if (node.nodeType !== 1) continue;

        var widget = kendo.widgetInstance($(children[idx]));
        if (widget && widget.element) {
            var name = $(widget.element).attr("k-name");
            if (name)
                object[name] = widget;
        }

        traverseChildren(object, children[idx]);
    }
}

For each element with a widget, you give it a name to access it with:

<input k-name="picker"data-role="datepicker" />

Then you could access the widget in the VM:

$(document).ready(function () {
    kendo.originalBind = kendo.bind;
    kendo.bind = bind;

    var viewmodel = kendo.observable({
        setToday: function (e) {
            this.picker.value(newDate());
        },
        enable: function (e) {
            this.picker.enable(true);
        },
        disable: function (e) {
            this.picker.enable(false);
        }    
    });

    kendo.bind($("#example"), viewmodel);
});

(demo)