Edit this page

PanelBar HtmlHelper Overview

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

It allows you to configure the Kendo UI PanelBar widget from server-side code. The PanelBar displays hierarchical data as a multi-level, expandable widget.

For more information on the HtmlHelper, refer to the article on the PanelBar HtmlHelper for ASP.NET MVC.

Basic Usage

The following example demonstrates how to define the PanelBar by using the PanelBar HtmlHelper.

Example

   @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .DataSource(source =>
        {
            source.Read(read => read.Action("Read_PanelBarData", "PanelBar"));
        })
    )
     public class PanelBarController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public static IList<HierarchicalViewModel> GetHierarchicalData()
        {
            var result = new List<HierarchicalViewModel>()
            {
                new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item" }
            };

            return result;
        }

        public IActionResult Read_PanelBarData(int? id)
        {
            var result = GetHierarchicalData()
                .Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
                .Select(item => new {
                    id = item.ID,
                    Name = item.Name,
                    expanded = item.Expanded,
                    imageUrl = item.ImageUrl,
                    hasChildren = item.HasChildren
                });           

            return Json(result);
        }
    }

Configuration

The following example demonstrates the basic configuration of the PanelBar HtmlHelper and how to get the PanelBar instance.

    @(Html.Kendo().PanelBar()
        .Name("panelbar")    
        .TemplateId("panelbar-template")
        .ExpandMode(PanelBarExpandMode.Single)
        .Events(events => events
            .Select("select")
            .Expand("expand")
            .Collapse("collapse")
            .Activate("activate")
            .ContentLoad("contentLoad")
            .Error("error")
        )
        .DataSource(source =>
        {
            source.Read(read => read.Action("Read_PanelBarData", "PanelBar"));
        })
    )

    <script type="text/javascript">
        $(function () {
            //Notice that the Name() of the PanelBar is used to get its client-side instance.
            var panelbar = $("#panelbar").data("kendoPanelBar");
            console.log(panelbar);
        });
    </script>
    <script id="panelbar-template" type="text/kendo-ui-template">
        #: item.text #
        # if (!item.items) { #
            <a class='delete-link' href='\#'></a>
        # } #
    </script>

See Also