Search code examples
kendo-uihierarchical-datadouble-clicktreelist

Kendo TreeList doubleclick get Tree-node info


I have a customised Treelist from kendo UI and I'm using customized commandbuttons. I am manually adding clickevents to the buttons and also manually hide and show the edit,delete and update buttons.

This is all because in the tree I have 3 levels in the hierarchie. The 1st and 2nd level are categories and the 3rd level are products. Only the 3rd level should be editable so I created a column template with some scripting checking the "Type" field of the row and voila it works.. Only the products get the buttons.

Now I'm exploring if I could do the same without the buttons but with doubleclickevent. So I added the doubleclickevent to the TreeList but:

How do I get the hierarchy info (level 3) to check if we are talking about a product? Has anyone an idea?

So far I came up with this code for the doubleclick:

var treeList = $("#treelist" <here specific class for row items ?> ).on("dblclick", function (e) {
            var rowindex = e.target.parentNode.rowIndex; // get rowindex
            var tr = $(e.target).closest("tr"); // get the nearest table row (tr)

            var treeList = $("#treelist").data("kendoTreeList");
            tr.find("#btndelete").addClass("hidden");
            tr.find("#btnedit").addClass("hidden");
            tr.find("#btnupdate").removeClass("hidden");
            treeList.saveRow();      // any other rows in editmode.. close
            treeList.editRow(tr[0]); // put selected row in editmode

            //if ($("#treeView").getKendoTreeList().dataItem(node).items.length == 0) {
                // These lines where from treeview. I have to adapt the for TreeList somehow
                // This if-statement should mean that you are on an Item that has no Child items
                // Use $("#treeView").getKendoTreeView().dataItem(node) to get values from
                // the dataitem
            //}
        });

Solution

  • Try this:

    var dataItem = $("#treelist").data("kendoTreeList").dataItem($(e.target).closest("tr"));
    

    With the current clicked tr you can use Grid's dataItem method to get the dataItem from the current row:

    if (dataItem.Type == 3) // Or whatever that make your condition