This example shows how to bind Telerik TabStrip 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["tabStripData"] = NavigationDataBuilder.GetCollection();
        return View();
    }
        
  2. Pass the collection as the first parameter of the BindTo method. The second parameter is an Action<TabStripItem> which is called for all databound items. You should use it to set the required properties of each panel item:
    <%= Html.Telerik().TabStrip()
            .Name("TabStrip")
            .BindTo((IEnumerable<NavigationData>)ViewData["tabStripData"],
                (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.