Save the State of TreeView Items

Environment

Product	Telerik UI for ASP.NET MVC TreeView
Product Version	Created with version 2024.4.1112

Description

How can I save the expanded and checked state of the TreeView items on the server and preserve it the next time the data is loaded?

Solution

1. Define a TreeView that binds to remote data and handle its Change event.

Razor

@(Html.Kendo().TreeView()
    .Name("treeview")
    .Checkboxes(true)
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Read", "Home")
        )
        .Model(model =>
        {
            model.Id("ID");
            model.HasChildren("HasChildren");
        })
        .Events(events => events.Change("OnChange"))
    )
)

JS

function OnChange(e) {
        if (e.action == "itemchange") {
            var item = e.items[0];
            $.post('@Url.Action("Save", "Home")', { // Submit an AJAX request to the server and send the current state of the selected item.
                id: item.id,
                isChecked: item.checked,
                expanded: item.expanded
            });
        }

}

C#

public void Save(int id, bool isChecked, bool expanded)
{
    UpdateModel(data.First(v => v.ID == id));
}

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository.

More ASP.NET MVC TreeView Resources

• ASP.NET MVC TreeView Documentation

• ASP.NET MVC TreeView Demos

• ASP.NET MVC TreeView 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 TreeView for ASP.NET MVC
• Server-Side API Reference of the TreeView for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base