Selected DataItem

[Yo]

In the change event, is there any way to get the underlying data item of the selected node?

For a treeview control we can get the data item with something like this in the select event:

var dataItem = myTree.dataItem(e.node);

However, there's no "node" attribute in the change event for DropDownTree.

How do we do this?

[Ivan Danchev]

Hello,

The DropDownTree has a TreeView embedded in itself. Therefore you can attach a select event handler to the embedded TreeView as shown in this dojo example, since the DropDownTree's own change event does not hold information on the selected node.

Regards,
Ivan Danchev
Progress Telerik

[Samad]

Hello,

I'm using the ASP.Net Core kendo DropDownTree displaying categories and product names under each category. The search filter works fine but when I search for a category name I need also to be able to display all the products to this category.

So in the search field, If I type : Big.. I need to have this result:
BigCategory
   BCProduct1
   BCProduct2

currently the filter shows only BigCategory without related products

[Ivan Danchev]

Hello Samad,

Currently the DropDownTree filters all nodes (parent and child nodes). To illustrate this, here's an exemplary structure of nodes:

honda
       -civic
       -accord
japanese
      -subaru
      -honda
      -mitsubishi
 

In this case "honda" is present both as a root node and as a child node. So if I search for "honda", the DropDownTree  will return the following result:

honda
japanese
       -honda

As you can see it returns only the nodes that match the filter - the root honda node and the child honda node (its parent is returned because it is needed for the hierarchy to be properly displayed).

In the example you provided, in order for the DropDownTree to return BigCategory and its child nodes it should be performing filtering only on parent nodes. However, as mentioned and demonstrated above, it filters child nodes as well. This is why the child nodes are not returned on searching for "Big".

If you want an option for toggling this behavior on/off, we would suggest logging a feature request in our feedback portal: https://feedback.telerik.com/kendo-jquery-ui

Regards,
Ivan Danchev
Progress Telerik

[Samad]

Hi Evan,

I'm trying to use the embedded TreeView of the DropDownTree to rebuild the tree but I'm not sure what is the right event to use for this. I tried the databound event and the items are appended to the dataitem but in an infinit loop.

function tree_dataBound(e) {
        var dataItem = e.sender.dataItem(e.node);

 if (dataItem && dataItem.items) {
            $.each(dataItem.items, function (idx, item) {
                dataItem.append(item);
            });
        }

}

May be you have a better idea what would be the right treeview event to use for rebuilding the tree when the filtered item is a category with children items.

Thanks

Samad

 

 

[Ivan Danchev]

Hi Samad,

Appending dataItems should be done outside of the "dataBound" event, because this triggers the same event, thus resulting in an infinite loop. However, there is no suitable event to do that, because the "filtering" event is fired before the filtering actually occurs. And no other event fires after "dataBound".

If you want to append nodes, this should be done outside the dataBound event, for example in a button's click handler, or another suitable handler.

Regards,
Ivan Danchev
Progress Telerik

[Samad]

Hi Ivan,

The dataBound event was the only event that gives me the current filtered dataitem with its (hidden) children. Then what I did I called the Treeview "select(dataitem)" method so that the select event is triggered but then in the select event the append method didn't give me the expected results.

Regards

Samad

[Ivan Danchev]

Hi Samad,

The "select" event on user interaction (e.g. selecting a node by clicking on it). It is not triggered automatically when you programmatically select a node with the select() method. In this case, if you want the "select" event to fire, you need to trigger it with the treeview's trigger() method:

var treeview = $("#treeview").data("kendoTreeView");
var nodeToSelect = treeview.findByText("MyNode");
  
treeview.select(nodeToSelect);
treeview.trigger("select", { node: nodeToSelect[0] });

Regards,
Ivan Danchev
Progress Telerik