PanelBar
Edit this docThe PanelBar HtmlHelper extension is a server-side wrapper for the Kendo UI PanelBar widget.
Getting Started
There are several ways to define items of the Kendo PanelBar for ASP.NET MVC
- use items builder - manually define the properties of each PanelBar item.
- sitemap binding - uses a sitemap to create the items of the PanelBar.
- model binding - uses a collection of objects to create the items of the PanelBar.
Make sure you have followed all the steps from the Introduction help topic.
Create a new action method which renders the view:
public ActionResult Index()
{
return View();
}
Add a simple panelbar:
WebForms
<%: Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.Items(items =>
{
items.Add().Text("Item 1"); //Add item with text "Item1")
items.Add().Text("Item 2"); //Add item with text "Item2")
})
%>
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.Items(items =>
{
items.Add().Text("Item 1"); //Add item with text "Item1")
items.Add().Text("Item 2"); //Add item with text "Item2")
})
)
Make sure you have followed all the steps from the Introduction help topic.
Create a simple sitemap with sample.sitemap file name at the root of the project:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Home" controller="Home" action="Overview">
<siteMapNode title="Grid">
<siteMapNode controller="grid" action="index" title="First Look (Razor)" area="razor"/>
<siteMapNode controller="grid" action="index" title="First Look (ASPX)" area="aspx"/>
</siteMapNode>
<siteMapNode title="PanelBar">
<siteMapNode controller="panelbar" action="index" title="First Look (Razor)" area="razor"/>
<siteMapNode controller="panelbar" action="index" title="First Look (ASPX)" area="aspx"/>
</siteMapNode>
</siteMapNode>
</siteMap>
Load the sitemap using SiteMapManager:
public ActionResult Index()
{
if (!SiteMapManager.SiteMaps.ContainsKey("sample"))
{
SiteMapManager.SiteMaps.Register<xmlsitemap>("sample", sitmap => sitmap.LoadFrom("~/sample.sitemap"));
}
return View();
}
Add a panelbar:
WebForms
<%: Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.BindTo("sample") //bind to sitemap with name "sample"
%>
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.BindTo("sample") //bind to sitemap with name "sample"
)
Make sure you have followed all the steps from the Introduction help topic.
Create a new action method and pass the Categories table as the model. Note that the Categories should have association to the Products table:
public ActionResult Index()
{
NorthwindDataContext northwind = new NorthwindDataContext();
return View(northwind.Categories);
}
Make your view strongly typed:
WebForms
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Category>>" %>
Razor
@model IEnumerable<MvcApplication1.Models.Category>
Add a panelbar:
WebForms
<%: Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.BindTo(Model, mappings =>
{
mappings.For<category>(binding => binding //define first level of panelbar
.ItemDataBound((item, category) => //define mapping between panelbar item properties and the model properties
{
item.Text = category.CategoryName;
})
.Children(category => category.Products)); //define which property of the model contains the children
mappings.For<product>(binding => binding
.ItemDataBound((item, product) =>
{
item.Text = product.ProductName;
}));
})
%>
Razor
@(Html.Kendo().PanelBar()
.Name("panelbar") //The name of the panelbar is mandatory. It specifies the "id" attribute of the widget.
.BindTo(Model, mappings =>
{
mappings.For<category>(binding => binding //define first level of panelbar
.ItemDataBound((item, category) => //define mapping between panelbar item properties and the model properties
{
item.Text = category.CategoryName;
})
.Children(category => category.Products)); //define which property of the model contains the children
mappings.For<product>(binding => binding
.ItemDataBound((item, product) =>
{
item.Text = product.ProductName;
}));
})
)
The Menu widget has built-in security trimming functionality, which is enabled by default. If the URL, which Menu item points to is not authorized then it is hidden.
Security trimming depends on the ASP.NET MVC Authorization authorization.
Every Action method decorated with AuthorizeAttribute will check whether the user is authorized and will allow/forbid the request.
Check this link
for more information about ASP.NET MVC Authorization. The Menu will hide the menu item if the OnAuthorization method returns
HttpUnauthorizedResult. If you need to use custom AuthorizeAttribute check this
link, which shows how to achieve your goal.
You can reference an existing PanelBar instance via jQuery.data().
Once a reference has been established, you can use the API to control its behavior.
//Put this after your Kendo PanelBar for ASP.NET MVC declaration
<script>
$(function() {
// Notice that the Name() of the panelbar is used to get its client-side instance
var panelbar = $("#panelbar").data("kendoPanelBar");
});
</script>
You can subscribe to all events exposed by Kendo UI PanelBar:
<%: Html.Kendo().PanelBar()
.Name("panelbar")
.Events(e => e
.Expand("panelbar_expand")
.Collapse("panelbar_collapse")
)
%>
<script>
function panelbar_collapse() {
//Handle the collapse event
}
function panelbar_expand() {
//Handle the expand event
}
</script>
@(Html.Kendo().PanelBar()
.Name("panelbar")
.Events(e => e
.Expand("panelbar_expand")
.Collapse("panelbar_collapse")
)
)
<script>
function panelbar_collapse() {
//Handle the collapse event
}
function panelbar_expand() {
//Handle the expand event
}
</script>
@(Html.Kendo().PanelBar()
.Name("panelbar")
.Events(e => e
.Expand(@<text>
function() {
//Handle the expand event inline
}
</text>)
.Collapse(@<text>
function() {
//Handle the collapse event inline
}
</text>)
)
)