New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.

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

See Also

In this article