Expand the Selected Nodes of the TreeView Asynchronously

Environment

Product	TreeView for Progress® Telerik® UI for ASP.NET MVC
Product Version	Created with version 2024.4.1112

Description

How can I asynchronously expand the selected TreeView nodes when the child nodes are loaded on demand?

Solution

The TreeView component supports AJAX data binding by using Entity Framework. To asynchronously expand the selected nodes of the TreeView, follow the steps below:

Create a new ASP.NET MVC application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application.
If you decide not to use the Visual Studio extensions, follow the Getting Started Guide to add the Telerik UI for ASP.NET MVC library to an existing application.
In the Visual Studio solution explorer, right-click Models.
Select Add > New Item.
On the Add New Item dialog, select Data > ADO.NET Data Model.
Provide the Northwind.edmx name to the model and click Next. As a result, the Entity Data Model Wizard starts.
Select Generate from database and click Next.
Configure a connection to the Northwind database and click Next.
Select all tables and click Finish.

Open Controllers/HomeController.cs and add a new action method that returns JSON. Each time the user expands a parent node, the TreeView makes an Ajax request to this action method. The action method returns only the child nodes of the expanded parent node. The TreeView provides the unique identifier of the respective parent node. During the initial request, the parent id is null.

public JsonResult Employees_Read(int? id)
{
    using (var northwind = new NORTHWNDEntities())
    {
        var employeesQuery = northwind.Employees.Select(c => new HierarchicalViewModel
        {
            ID = c.EmployeeID,
            Name = c.FirstName,
            ParentID = null,
            HasChildren = c.Orders.Any()
        })
        .Union(northwind.Orders.Select(c => new HierarchicalViewModel
        {
            ID = c.OrderID,
            Name = c.ShipAddress,
            ParentID = c.EmployeeID,
            HasChildren = c.Order_Details.Any()
        }))
        .Union(northwind.Order_Details.Select(c => new HierarchicalViewModel
        {
            ID = c.OrderID,
            Name = c.Product.ProductName,
            ParentID = c.Order.OrderID,
            HasChildren = false
        }));

        var result = employeesQuery.ToList()
            .Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
            .Select(item => new {
                id = item.ID,
                Name = item.Name,
                expanded = item.Expanded,
                hasChildren = item.HasChildren

            });

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

Open Views/Index.cshtml and add a TreeView.

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Employees_Read", "Home")
        )
    )
)

Add a button which will asynchronously load child nodes with the load() method in the child data source and, therefore, asynchronously expand the currently selected node.

@(Html.Kendo().Button()
    .Name("expandNode")
    .Content("Expand selected node")
    .Events(e => e.Click("onExpandClick"))
)

<script>
    function onExpandClick(e) {
        var tree = $("#treeview").data("kendoTreeView"),
            selected = tree.select(),
            dataItem = tree.dataItem(selected);

        var load = function (item) {
            var that = this,
                chain = $.Deferred().resolve();

            chain = chain.then(function () {
                that.expand(that.findByUid(item.uid));
                return item.load();
            }).then(function () {
                if (item.hasChildren) {
                    var childrenChain = $.Deferred().resolve();

                    item.children.data().forEach(function (child) {
                        (function (child) {
                            childrenChain = childrenChain.then(function () {
                                return load.bind(that)(child);
                            })
                        })(child)
                    })

                    return childrenChain;
                }
            });

            return chain;
        }

        if (selected.length == 0) {
            alert("Select item first!");
            return;
        }

        load.bind(tree)(dataItem);
    }
</script>

Press CTRL+F5 to build and run the application. Select a node and click the Expand selected node button.

To see the complete implementation, refer to the ASP.NET MVC project on asynchronously expanding the selected nodes of the TreeView.

Expand the Selected Nodes of the TreeView Asynchronously

Environment

Description

Solution

More ASP.NET MVC TreeView Resources

See Also

Getting Started

Support Resources

Community