Configuring Local Hierarchical Data with CheckBox Functionality

Environment

Product Version	2020.1.114
Product	Progress® Kendo UI® TreeView for ASP.NET MVC

Description

Is there a way to set the hierarchical configuration in the model to a Kendo UI TreeView locally with checkbox selection?

Solution

The Kendo UI TreeView can be bound to a defined model from a controller and can be modified to specify if the item is checked or not. For example, here is the same TreeView used in the Binding to Local Data Live Demo with checkbox functionality. It is configured with Local Data Binding using the BindTo() method.

Razor

@using NameSpace.Models
@using Kendo.Mvc.UI.Fluent


@(Html.Kendo().TreeView()
        .Name("treeview")
        .Checkboxes(checkboxes => checkboxes
            .Name("checkedFiles")
            .CheckChildren(true)
        )
        //Inline data is set with the BindTo method
        .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
                {
                    item.Text = category.CategoryName;
                    item.Checked = category.Checked;  
                })
                .Children(category => category.SubCategories));
                
            mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
            {
                item.Text = subCategory.SubCategoryName;
                item.Checked = subCategory.Checked;
            }));
        })
)

C#

        public ActionResult Index()
        {
            //Data is passed by the ViewBag
            ViewBag.inline = Local_Data_Binding_Get_Inline_Data();

            return View();
        }


        private IEnumerable<CategoryItem> Local_Data_Binding_Get_Inline_Data()
        {
            //Inline data which defines the model
            List<CategoryItem> inline = new List<CategoryItem>
                {
                    new CategoryItem
                    {
                        CategoryName = "Storage",
                        Checked = false,
                        SubCategories = new List<SubCategoryItem>
                        {
                            new SubCategoryItem()
                            {
                                SubCategoryName = "Wall Shelving",
                                Checked = true,
                            },
                            new SubCategoryItem
                            {
                                 SubCategoryName = "Floor Shelving",
                                 Checked = true,
                            },
                            new SubCategoryItem
                            {
                                 SubCategoryName = "Kids Storage",
                                 Checked = false,
                            }
                        }
                    },
                    new CategoryItem
                    {
                        CategoryName = "Lights",
                        Checked = false,
                        SubCategories = new List<SubCategoryItem>
                        {
                            new SubCategoryItem()
                            {
                                SubCategoryName = "Ceiling",
                                Checked = true,
                            },
                            new SubCategoryItem
                            {
                                 SubCategoryName = "Table",
                                 Checked = false,
                            },
                            new SubCategoryItem
                            {
                                 SubCategoryName = "Floor",
                                 Checked = true,
                            }
                        }
                    }
                };

            return inline;
        }

More ASP.NET Core TreeView Resources

• ASP.NET Core TreeView Documentation

• ASP.NET Core TreeView Demos

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