This example shows how to bind Telerik PanelBar for ASP.NET MVC to a collection of objects.

The required steps are:

1. Pass a IEnumerable<T> to the view:

   public ActionResult DataBindingToModel()
   {
       ViewData["panelbarData"] = NavigationDataBuilder.GetCollection();
       return View();
   }
       

2. Pass the collection as the first parameter of the BindTo method. The second parameter is an Action<PanelBarItem> which is called for all databound items. You should use it to set the required properties of each panel item:

   <%= Html.Telerik().PanelBar()
           .Name("PanelBar")
           .BindTo((IEnumerable<NavigationData>)ViewData["panelbarData"],
               (item, navigationData) =>
               {
                   item.Text = navigationData.Text;
                   item.ImageUrl = navigationData.ImageUrl;
                   item.Url = navigationData.NavigateUrl;
               })
   %>
           

You can prevent the normal behavior of the link (navigating to the specified url), with e.preventDefault(); method. The same approach is used in this example.