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