Items Binding

The PanelBar enables you to manually define the properties of each item.

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

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

   public ActionResult Index()
   {
       return View();
   }
   

3. Add a PanelBar.

       @(Html.Kendo().PanelBar()
           .Name("panelbar") // The name of the panelbar is mandatory. It specifies the "id" attribute of the PanelBar.
           .Items(items =>
           {
               items.Add().Text("Item 1"); // Add item with text "Item1".
               items.Add().Text("Item 2"); // Add item with text "Item2".
           })
       )
   

    <kendo-panelbar name="panelbar">
       <items>
           <panelbar-item text="Item 1"></panelbar-item>
           <panelbar-item text="Item 2"></panelbar-item>
       </items>
   </kendo-panelbar>
   

   When the Items configuration is used, the component generates internally the required HTML markup used for its initialization. In this scenario the DataBound event is not fired.

See Also

• Basic Usage of the PanelBar HtmlHelper for ASP.NET Core (Demo)
• PanelBarBuilder Server-Side API
• PanelBar Server-Side API