Kendoui treeview node double click event editing

Question

I have a kendo ui treeview. I want to update or delete the node of the kendo treeview on double click event. When i double click on the treeview node it is getting to edit mode in the text box. Then i want to append a close button icon and when i click on that i want to remove the node and the related child nodes. I have defined the code like

        var treeview = $("#treeview").kendoTreeView({
            template: kendo.template($("#treeview-template").html()),
            select: onSelect,
            loadOnDemand: true,
            dataSource: dataSource, // dynamic datasource
            dataTextField: ["categoryname"]
        }).on('dblclick', '.child', function(event)
        {
            $(this).siblings(".sri").show();
            $target = $(event.target);
            alert("event" + event);
            $target.editable(function (value, settings)
            {                  
                return value;
            },
            {
                event: 'dblclick',
                cssclass: 'treeInlineEdit'
            });

            $target.trigger('dblclick', [event]);

        }).data("kendoTreeView");

And my template is like

      <script id="treeview-template" type="text/kendo-ui-template">

            <span class='child'>#: item.categoryname #</span>
            <a class='showcloseicon' onclick='sri(#:item.categoryid#)' name='#:item.categoryid#' style='color:blue;display:none'>X</a>

</script>

But the code is not properly working. What are the changes i need to do.

Grandizer Grandizer · Accepted Answer · 2014-12-12T14:26:41

This may be late to the party, but I was looking for a KendoUI TreeView DoubleClick event as well. Looked around and nothing was straight forward. With a bit of tinkering, I was able to get what I needed in the following code. I have left out all of the normal binding and setting up of datasources and standard treeview setup. Right after the code to setup the treeview, I have the following code:

$("#treeView .k-in").on("dblclick", function (e) {
  var node = $(e.target).closest(".k-item");
  if ($("#treeView").getKendoTreeView().dataItem(node).items.length == 0) {
    // This means you are on an Item that has no Child items
    // Use $("#treeView").getKendoTreeView().dataItem(node) to get values from
    // the dataitem
  }
});

That is all I needed to get what I was looking for. A double-click event on a child node item. Hope it helps someone.

Kendoui treeview node double click event editing

1 Answers