New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Loading and expanding only the first level data in the TreeList

Environment

Product	Telerik UI for ASP.NET MVC TreeList
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.3.1010 version

Description

How do I expand only the first item on page load in the Telerik UI for ASP.NET MVC TreeList.

Solution

To achieve the desired results:

Set the TreeList AutoBind() property explicitly to false.
Make a read request (the custom call which will return the initial data) by using the client-side dataSource's read() method.
Use the client-side TreeListDataSource's load() method to load the root.
To expand only the items which are in the view, use the client-side expand() method - this will not make a request for non-loaded items.

Index.cshtml
    @(Html.Kendo().TreeList<EmployeeDirectoryRemoteModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250);
            columns.Add().Field(e => e.LastName);
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        })
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Index", "EmployeeDirectory"))
            .Model(m => {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
            })
        )
    )
Script.js
    <script>
        $(document).ready(function () {

            setTimeout(function () {
                var treelist = $("#treelist").data("kendoTreeList");

                treelist.dataSource.read().then(function () {
                    var root = treelist.dataSource.at(0); // Gather the root return treelist.dataSource.load(root); // Load the root item.
    
                }).then(function () {
                    var root = treelist.dataSource.at(0); // Obtain the root item.
                    var children = treelist.dataSource.childNodes(root); // Get a reference of the child nodes.
                    treelist.expand(treelist.items());  // Expand the items that are only within the boundaries of the view.
                });
            })
        })
    </script>
Controller.cs
    public class EmployeeDirectoryController : Controller
    {
        private EmployeeDirectoryService employeeDirectory;

        public EmployeeDirectoryController()
        {
            employeeDirectory = new EmployeeDirectoryService(new DemoDBContext());
        }

        public JsonResult Index([DataSourceRequest] DataSourceRequest request, int? id)
        {
            var result = ((EmployeeDirectoryService) employeeDirectory).GetAllRemote().ToTreeDataSourceResult(request,
                e => e.EmployeeId,
                e => e.ReportsTo,
                e => id.HasValue ? e.ReportsTo == id : e.ReportsTo == null,
                e => e
            );

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

Loading and expanding only the first level data in the TreeList

Environment

Description

Solution

More ASP.NET MVC TreeList Resources

See Also