Server Binding

Local data is the data that is available on the client when the PanelBar is initialized.

You can bind the PanelBar locally on the server by passing the appropriate collection to the component's BindTo() method.

1. Pass the data to the view through ViewData.

       public ActionResult Index()
       {
           ViewBag.panelbarData = GetData();
           return View();
       }
   
       private IEnumerable<PanelBarItemModel> GetData()
       {
           List<PanelBarItemModel> data = new List<PanelBarItemModel>
               {
                   new PanelBarItemModel
                   {
                       Text = "Furniture",
                       Items = new List<PanelBarItemModel>
                       {
                           new PanelBarItemModel()
                           {
                               Text = "Tables & Chairs"
                           },
                           new PanelBarItemModel
                           {
                                Text = "Sofas"
                           },
                           new PanelBarItemModel
                           {
                                Text = "Occasional Furniture"
                           }
                       }
                   },
                   new PanelBarItemModel
                   {
                       Text = "Decor",
                       Items = new List<PanelBarItemModel>
                       {
                           new PanelBarItemModel()
                           {
                               Text = "Bed Linen"
                           },
                           new PanelBarItemModel
                           {
                                Text = "Curtains & Blinds"
                           },
                           new PanelBarItemModel
                           {
                                Text = "Carpets"
                           }
                       }
                   }
               };
           return data;
       }
   

2. Add the PanelBar to the view and bind it to the data that is saved in the ViewData.

       @using Kendo.Mvc.UI.Fluent
   
       @(Html.Kendo().PanelBar()
           .Name("panelbar")
           .BindTo((IEnumerable<PanelBarItemModel>)ViewBag.panelbarData)
       )
   

See Also

• Ajax Data Binding by the PanelBar HtmlHelper for ASP.NET MVC (Demo)
• Client-Side API
• Server-Side API