Edit this page

PanelBar HtmlHelper Overview

The PanelBar HtmlHelper extension is a server-side wrapper for the Kendo UI PanelBar widget.

Getting Started

The Basics

There are a few ways to bind a Kendo UI 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 Menu.

Items Builder

Below are listed the steps for you to follow when defining the items of a Kendo UI PanelBar.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a PanelBar.

    Example
    
            <%: 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")
                    })
            %>
    
    
            @(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")
                  })
            )
    

Sitemap Binding

Below are listed the steps for you to follow when binding a Kendo UI PanelBar to a sitemap.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a simple sitemap with a sample.sitemap file name at the root of the project.

    Example
        <?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>
    
  3. Load the sitemap using the SiteMapManager.

    Example
        public ActionResult Index()
        {
            if (!SiteMapManager.SiteMaps.ContainsKey("sample"))
            {
                SiteMapManager.SiteMaps.Register<XmlSiteMap>("sample", sitmap => sitmap.LoadFrom("~/sample.sitemap"));
            }
            return View();
        }
    
  4. Add a PanelBar.

    Example
    
            <%: 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"
            %>
    
    
            @(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"
            )
    

Model Binding

Below are listed the steps for you to follow when binding a kendo UI PanelBar to a hierarchical model.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method and pass the Categories table as the model. Note that the Categories should be associated to the Products table.

    Example
        public ActionResult Index()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return View(northwind.Categories);
        }
    
  3. Make your view strongly typed.

    Example
    
            <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
                Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Category>>" %>
    
    
            @model IEnumerable<MvcApplication1.Models.Category>
    
  4. Add a PanelBar.

    Example
    
            <%: 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;
                            }));
                    })
                %>
    
    
            @(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;
                               }));
                   })
            )
    

Security Trimming

The Kendo UI PanelBar widget has a built-in security trimming functionality, which is enabled by default. If the URL, which the PanelBar item points to, is not authorized, then it is hidden. Security trimming depends on the ASP.NET MVC Authorization. Every action method decorated with AuthorizeAttribute checks whether the user is authorized and allows or forbids the request.

For more information on the ASP.NET MVC Authorization, refer to this link.

The PanelBar hides the Menu item if the OnAuthorization method returns HttpUnauthorizedResult.

To use a custom AuthorizeAttribute, refer to this link.

Event Handling

You can subscribe to all PanelBar events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

        <%: 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>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

        @(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>)
              )
        )

Reference

Existing Instances

To reference an existing Kendo UI PanelBar instance, use the jQuery.data() configuration option. Once a reference is established, use the PanelBar API to control its behavior.

Example
  //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>

See Also