Clever Geek Handbook

Telerik Kendo ui treeView - expand / collapse node with one click

I am new to Telerik Kendo UI and am currently working on TreeView

( http://demos.telerik.com/kendo-ui/treeview/index )

It basically expands / collapses when I double click on it or when I click on the triangle icon. My question is this: how can I change this behavior to expand / collapse the tree node with one click?

Thanks in advance.

+3


source to share


1 answer


Do it with jQuery. Here is the code assuming the id of the kendoTreeView is "treeview":

$("#treeview").on('click', '.k-in', function () {
    var tree = $("#treeview").data('kendoTreeView');
    var item = $(this).closest('.k-item');
    if (item.attr('aria-expanded') === "true") {
        tree.collapse(item);
    }
    else {
        tree.expand(item);
    }
});

Or even shorter:



$("#treeview").on("click", ".k-in", function (e) {
    var tree = $("#treeview").data('kendoTreeView');
    tree.toggle($(e.target).closest(".k-item"));
});

Working example: http://dojo.telerik.com/ESofU

+4


source






More articles:


All Articles