Programmatically Expand Node and Parents

Environment

Product	Progress® Kendo UI® TreeView for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I expand all parent nodes by given child node text?

Solution

1. Find the node by its text.
2. If the node has a parent, expand the parent.
3. Repeat the check for a parent node until you cover all existing parent nodes.

<div class="demo-section k-content">
    <div id="treeview"></div>             
</div>
<div>
    <input type="text" id="text" placeholder="Ex. enter 'Robert King'"/>
    <button type="submit" onclick="expand()">Expand</button>
</div>
<script>
    var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
    homogeneous = new kendo.data.HierarchicalDataSource({
        transport: {
          read: {
            url: serviceRoot + "/Employees",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
          }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: homogeneous,
        loadOnDemand: false,
        dataTextField: "FullName"
    });

    function expand(){
        var text = $('#text').val();     
        var treeview = $("#treeview").data("kendoTreeView");

        var item = treeview.findByText(text);

        if(item.length > 0){
          treeview.select(item)
          var parent = treeview.parent(item);
          while(parent && parent.length > 0){           
            treeview.expand(parent);
            parent = treeview.parent(parent);
          }        
        }        
    }
</script>