Expand only the first item on page load

[Chris]

I want the tree list to only expand the first entry on page load.  But it seams like m.Expanded only works with true / false (expand all or none)

Doing an expression doesn't seem to work.
EG
m.Expanded(f => f.ParentNodeNumber == null ? true : false);

None working code,  when the page loads none of the items are expanded

    @(Html.Kendo().TreeList<MyModel>()
        .Name("GridBuildInfo")
        .Toolbar(toolbar =>
        {
            toolbar.Search();
        })
        .Columns(columns =>
        {
        columns.Add().Selectable(true).Width("35px");
        columns.Add().Field(p => p.ComponentItemId).Title("Item Id").Width(300);
        columns.Add().Field(p => p.ComponentItemDescriptionFriendly).Title("Item Description");
        columns.Add().Field(p => p.ComponentSerialNumber).Title("Serial #");
        })
    .Resizable(true)
    .Height(540)
        .Filterable()
        .DataSource(dataSource => dataSource
    .ServerOperation(false)
    .Sort(s => s.Add(a => a.HasFieldServiceableChildItems).Descending())
    .Read(read => read.Url("/GetData/TestTree"))
            .Model(m =>
            {
                m.Id(f => f.NodeNumber);
                m.ParentId(f => f.ParentNodeNumber);
                m.Field(f => f.HasChildItems);

            //want to expand only the first row.
            m.Expanded(f => f.ParentNodeNumber == null ? true : false);
    })
    ).Events(events =>
    {
        
        events.Expand("onExpand");
       
    })
    )

<script>
    function onExpand(arg) {
       
        console.log(arg);
    }

</script>

It loads like this:


if I click to expand,  the console log shows that ParentNodeNumber is null....


So how do I get it to expand the first item?

[Alexander]

Hi Chris,

I am attaching my reply from a previous discussion of ours for the benefit of the community.

"I have further pondered over any potentially feasible alternatives and stumbled upon the following knowledge base article that showcases such a scenario:

• Load and expand only the first level data in the TreeList (Knowledge Base Article) - the example relies on explicitly manipulating the .AutoBind() API configuration and programmatically handling the expenditure.

Although the sample tackles a Kendo UI for jQuery TreeList scenario, the same approach can be proceeded with the Telerik UI for ASP.NET Core TreeList incarnation as well:

In the context of the Telerik UI for ASP.NET Core suite, here is how the configuration:

TreeList:

@(Html.Kendo().TreeList<MyModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.ComponentSerialNumber).Width(250).Title("First Name");
        })
        .Resizable(true)
        .Height(540)
        .Filterable()
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("All", "Home"))
            .ServerOperation(false)
            .Sort(s => s.Add(a => a.ComponentItemId).Descending())
            .Model(m =>
            {
                m.Id(f => f.ComponentItemId);
                m.ParentId(f => f.ParentNodeNumber).Nullable(true);
                m.Field(f => f.ComponentSerialNumber);
            })
        )
)

JavaScript:

<script>
    $(document).ready(function () {

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

            treelist.dataSource.read().then(function () {
                var root = treelist.dataSource.at(0);
                console.log(root);

            }).then(function () {
                var root = treelist.dataSource.at(0);
                var children = treelist.dataSource.childNodes(root);
                treelist.expand(treelist.items());
            });
        })
    })
</script>

Controller:

public JsonResult All([DataSourceRequest] DataSourceRequest request)
{
    List<MyModel> result = new List<MyModel>();

    result.Add(new MyModel
    {
        ComponentItemId = 0,
        ParentNodeNumber = null,
        ComponentSerialNumber = "Top",
        HasChildItems = true
    });

    result.Add(new MyModel
    {
        ComponentItemId = 1,
        ParentNodeNumber = 0,
        ComponentSerialNumber = "Child 1",
        HasChildItems = true
    });

    result.Add(new MyModel
    {
        ComponentItemId = 2,
        ParentNodeNumber = 0,
        HasChildItems = false,
        ComponentSerialNumber = "Child 2"
    });

    result.Add(new MyModel
    {
        ComponentItemId = 3,
        ParentNodeNumber = 1,
        HasChildItems = false,
        ComponentSerialNumber = "Child 1-1"
    });

    return Json(result.ToTreeDataSourceResult(request,
        e => e.ComponentItemId,
        e => e.ParentNodeNumber,
        e => e
    ));
}

For your convenience, I am also attaching a runnable Telerik UI for ASP.NET Core "2023.3.1010" example for you to review additionally. 

The aforementioned approach would then produce the following visual representation:

"

Kind Regards,
Alexander
Progress Telerik

[Chris]

This solutions works perfect!