Loading and expanding only the first level data in the TreeList

Environment

Product	Telerik UI for ASP.NET Core TreeList
Progress Telerik UI for ASP.NET Core 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 Core TreeList.

Solution

To achieve the desired results:

1. Set the TreeList AutoBind() property explicitly to false.
2. Make a read request (the custom call which will return the initial data) by using the client-side dataSource's read() method.
3. Use the client-side TreeListDataSource's load() method to load the root.
4. 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 IEmployeeDirectoryService employeeDirectory;

        public EmployeeDirectoryController(
            IEmployeeDirectoryService service)
        {
            employeeDirectory = service;
        }

        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);
        }
    }

More ASP.NET Core TreeList Resources

• ASP.NET Core TreeList Documentation

• ASP.NET Core TreeList Demos

• ASP.NET Core TreeList Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the TreeList for ASP.NET Core
• Server-Side API Reference of the TreeList for ASP.NET Core
• Server-Side TagHelper API Reference of the TreeList for ASP.NET Core
• Telerik REPL: Load and expand only the first level data in the TreeList
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base