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:

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.

    @(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>
        $(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>

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

More ASP.NET MVC TreeList Resources

• ASP.NET MVC TreeList Documentation

• ASP.NET MVC TreeList Demos

• ASP.NET MVC TreeList Product Page

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

See Also

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