CODEWITHSUNDEEP
javascriptasp.netasp.net-corekendo-uikendo-treeview
PSR
PSR

Reputation: 893

How to select Kendo tree view node based on multiple properties

I am using Kendo treeview control. In my data some nodes have same parent and child node Ids but there is another property 'Type' in each node which is different for each node. My data has three levels

Take this sample example

    <div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dataSource: [
    { id: 10, Type:1,text: "foo", items: [
      { id: 10, Type:2, text: "bar", items: [
        { id: 13, Type:3, text: "baz" }
      ] }
    ] }
  ]
});

var treeview = $("#treeview").data("kendoTreeView");

// expand the path of nodes with ID 10 and Type 2
treeview.expandPath([10]);

</script>

I want to select node with Id 10 and Type 2 programatically. My treeview is configured with loadondemand set to true (data is big). All I have is Id and Type values to expand and select that particular node.

When I try treeview datasource get method I am getting first matching item, which is id 10 and Type 1 in the above example.

The "expandPath" method requires Ids from parent to child.

How to solve this issue?

Actual settings are like this

var treeDataSource = new kendo.data.HierarchicalDataSource({
            data: categoryDataSource,
            schema: {
                model: {
                    id: "Id",
                    children: "Children",
                    hasChildren(node) {
                        return (node.Children && node.Children.length > 0);
                    }
                }
            }
        });

and treeview with these options

template: dropDownTreeViewTemplate,
                    dataSource: treeDataSource,
                    loadOnDemand: true,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    select: function (e) {
                        // some code
                    }

Upvotes: 1

Views: 2627

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Try this recursive function:

let expandNodeRecursive = function expandNodeRecursive(id, type, nodes)
{
    let treeview = $("#treeview").data("kendoTreeView");

    if (!nodes) {
        nodes = treeview.dataSource.data();
    }

    var dataItem;
    for (var i = 0, l = nodes.length; i < l; i++) {
        dataItem = nodes[i];

        if (dataItem.Type == type && dataItem.id == id) {
            treeview.expandPath([dataItem.id]);
        }
        else if (dataItem.items && dataItem.items.length) {
            expandNodeRecursive(id, type, dataItem.items);
        }
    };
};

// Call it without 'nodes' param
expandNodeRecursive(2, 10);

Demo

Upvotes: 4

Related Questions