Edit this page

TabStrip HtmlHelper Overview

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

Getting Started

The Basics

There are a few ways to bind a Kendo UI TabStrip for ASP.NET MVC:

  • Use items builder—Manually define the properties of each TabStrip item.
  • Sitemap binding—Use a sitemap to create the items of the TabStrip.
  • Model binding—Use a collection of objects to create the items of the TabStrip.

Items Builder

Below are listed the steps for you to follow when defining the items of a Kendo UI TabStrip.

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

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

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a TabStrip.

    Example
    
            <%: Html.Kendo().TabStrip()
                    .Name("tabstrip") //The name of the tabstrip is mandatory. It specifies the "id" attribute of the widget.
                    .Items(items =>
                    {
                        items.Add().Text("Item 1"); //Add an item with the text "Item1".
                        items.Add().Text("Item 2"); //Add an item with the text "Item2".
                    })
            %>
    
    
            @(Html.Kendo().TabStrip()
                .Name("tabstrip") //The name of the TabStrip is mandatory. It specifies the "id" attribute of the widget.
                .Items(items =>
                {
                    items.Add().Text("Item 1"); //Add item with text "Item1")
                    items.Add().Text("Item 2"); //Add item with text "Item2")
                })
            )
    

Sitemap Binding

Below are listed the steps for you to follow when binding a Kendo UI TabStrip to a sitemap.

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

  2. Create a simple sitemap with the sample.sitemap file name at the root of the project.

    Example
        <?xml version="1.0" encoding="utf-8" ?>
        <siteMap>
          <siteMapNode title="Home" controller="Home" action="Overview">
          <siteMapNode controller="grid" action="index" title="Grid" />
          <siteMapNode controller="tabstrip" action="index" title="TabStrip" />
          </siteMapNode>
        </siteMap>
    
  3. Load the sitemap using SiteMapManager.

    Example
        public ActionResult Index()
        {
            if (!SiteMapManager.SiteMaps.ContainsKey("sample"))
            {
                SiteMapManager.SiteMaps.Register<xmlsitemap>("sample", sitmap => sitmap.LoadFrom("~/sample.sitemap"));
            }
            return View();
        }
    
  4. Add a TabStrip.

    Example
    
            <%: Html.Kendo().TabStrip()
                    .Name("tabstrip") //The name of the TabStrip is mandatory. It specifies the "id" attribute of the widget.
                    .BindTo("sample") //Bind to the sitemap with the name "sample".
            %>
    
    
            @(Html.Kendo().TabStrip()
                .Name("tabstrip") //The name of the tabstrip is mandatory. It specifies the "id" attribute of the widget.
                .BindTo("sample") //Bind to the sitemap with the name "sample".
            )
    

Model Binding

Below are listed the steps for you to follow when binding a Kendo UI TabStrip to a model.

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

  2. Create a new action method and pass the Categories table as the model.

    Example
        public ActionResult Index()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return View(northwind.Categories);
        }
    
  3. Make your view strongly typed.

    Example
    
            <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
                Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Category>>" %>
    
    
            @model IEnumerable<MvcApplication1.Models.Category>
    
  4. Add a TabStrip.

    Example
    
            <%: Html.Kendo().TabStrip()
                .Name("tabstrip") //The name of the TabStrip is mandatory. It specifies the "id" attribute of the widget.
                .BindTo(Model,(item,category)  =>
                {
                    item.Text = category.CategoryName;
                })
            %>
    
    
            @(Html.Kendo().TabStrip()
                .Name("tabstrip") //The name of the TabStrip is mandatory. It specifies the "id" attribute of the widget.
                .BindTo(Model,(item,category)  =>
                {
                    item.Text = category.CategoryName;
                })
            )
    

Security Trimming

The Kendo UI TabStrip widget has a built-in security trimming functionality, which is enabled by default. If the URL, which the TabStrip item points to, is not authorized, then it is hidden. Security trimming depends on the ASP.NET MVC Authorization. Every action method decorated with AuthorizeAttribute checks whether the user is authorized and allows or forbids the request.

For more information on the ASP.NET MVC Authorization, refer to this link.

The TabStrip hides the Menu item if the OnAuthorization method returns HttpUnauthorizedResult.

To use a custom AuthorizeAttribute, refer to this link.

Use Forms inside TabStrips

If Html.BeginForm() or Ajax.BeginForm() should be included inside a TabStrip .Content(), use the .Render() method of the TabStrip, as shown in the example below. Otherwise, the form will be rendered outside the TabStrip and the data will not be submitted correctly.

Example
    @{Html.Kendo().TabStrip()
        .Name("TabStrip1")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("Tab 1")
                .Content(@<text>
                    @using (Ajax.BeginForm("...", "..."))
                    {
                        ...
                    }
                </text>);
        }).Render();
    }

The above implementation is not required if the form is placed inside a partial view, which is loaded with Ajax via .LoadContentFrom(), or if a plain HTML <form> tag is used.

Event Handling

You can subscribe to all TabStrip events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

      <%: Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Events(e => e
                  .Select("tabstrip_select")
              )
      %>
      <script>
      function tabstrip_select() {
          //Handle the Select event.
      }
      </script>

      @(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Events(e => e
                  .Select("tabstrip_select")
            )
      )
      <script>
      function tabstrip_select() {
          //Handle the Select event.
      }
      </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

      @(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Events(e => e
                .Select(@<text>
                  function() {
                      //Handle the Select event inline.
                  }
                </text>)
            )
      )

Reference

Existing Instances

To reference an existing Kendo UI TabStrip instance, use the jQuery.data() configuration option. Once a reference is established, use the TabStrip API to control its behavior.

Example
  //Put this after your Kendo UI TabStrip for ASP.NET MVC declaration.
  <script>
  $(function() {
      //Notice that the Name() of the TabStrip is used to get its client-side instance.
      var tabstrip = $("#tabstrip").data("kendoTabStrip");
  });
  </script>

See Also