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

Updated over 6 months ago

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.

Razor
    @(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);
            })
        )
    )
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>
C#
    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