Expand Selected Nodes Asynchronously

The TreeView for ASP.NET MVC enables you to do Ajax binding by using Entity Framework and to asynchronously expand the selected nodes when loadOnDemand is set to true.

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

To asynchronously expand the selected nodes of the TreeView:

1. 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.
2. If you decide not to use the Visual Studio extensions, follow the Getting Started Guide for adding Telerik UI for ASP.NET MVC to existing applications.
3. In the Visual Studio solution explorer, right-click Models.
4. Select Add > New Item.
5. On the Add New Item dialog, select Data > ADO.NET Data Model.
6. Provide the Northwind.edmx name to the model and click Next. As a result, the Entity Data Model Wizard starts.
7. Select Generate from database and click Next.

8. Configure a connection to the Northwind database and click Next.

   

9. Select all tables and click Finish.

10. Open Controllers/HomeController.cs and add a new action method which will return 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 parent node or, when it makes the initial request, 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);
        }
    }
    

11. 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")
            )
        )
    )
    

12. 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>
    

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

See Also

• Basic Usage of the TreeView HtmlHelper for ASP.NET MVC (Demo)
• TreeViewBuilder Server-Side API
• TreeView Server-Side API