Ajax Data Binding
The PanelBar provides support for remote data binding by using a DataSource configuration object.
@(Html.Kendo().PanelBar()
.Name("panelbar")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Read_PanelBarData", "Home")
)
)
)
<kendo-panelbar name="panelbar" datatextfield="Name">
<hierarchical-datasource>
<transport>
<read url="@Url.Action("Read_PanelBarData", "Home")" />
</transport>
</hierarchical-datasource>
</kendo-panelbar>
public static IList<HierarchicalViewModel> GetHierarchicalData()
{
var result = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
};
return result;
}
public IActionResult Read_PanelBarData(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
hasChildren = item.HasChildren
});
return Json(result);
}