RadTabStrip for ASP.NET AJAX

RadControls for ASP.NET AJAX

RadTab objects provide a special collection called Attributes. You can use this collection to expand the information stored with the tabs. The Attributes collection lets you store any number of attributes as name/value pairs. You can specify custom attributes declaratively in the RadTab tag or programmatically using the Attributes collection of the RadTab. You can also access custom attributes client-side, using the get_attributes collection of the RadTab client-side object.

Setting attributes declaratively

In the ASP.NET declaration of your RadTabStrip object, you can add custom attributes to tabs by simply adding Name="value" to the RadTab declaration. For example, the following RadTabStrip definition adds two custom attributes named "state" and "labelName" to its tabs:

CopyASPX
 

<telerik:RadTabStrip
  ID="RadTabStrip1" runat="server"
  MultiPageID="RadMultiPage1"
  OnTabClick="RadTabStrip1_TabClick1"
  OnClientTabSelected="VisitTab" >
  <Tabs>
    <telerik:RadTab
         runat="server"
         Text="Tab1"
         state="unvisited"
         labelName="Label1"
>
    </telerik:RadTab>
    <telerik:RadTab
       runat="server"
       Text="Tab2"
       state="unvisited"
       labelName="Label2" />
    <telerik:RadTab
       runat="server"
       Text="Tab3"
       state="unvisited"
       labelName="Label3" />
  </Tabs>
</telerik:RadTabStrip>

Using attributes in server-side code

You can access custom attributes from code behind via the Attributes collection exposed by the RadTab class.

 

Using attributes in client-side code

You can work with custom attributes from client-side code using the attributes collection returned by the get_attributes method of the client-side RadTab object. The attributes collection has a getAttribute method that lets you get attribute values, and a setAttribute method that lets you set them:

CopyJavaScript
     

        function VisitTab(sender, args)
        {
          var tab = args.get_tab();
          var attributes = tab.get_attributes();
          if (attributes.getAttribute("state") == "unvisited")
          {
            sender.trackChanges();
            attributes.setAttribute("state", "visiting");
            tab.set_text("*" + tab.get_text());
            sender.commitChanges();
          }
        }   


Data Binding with Custom Attributes

When binding the RadTabStrip to data, custom attributes can be set in the TabDataBound event. The following code binds the tab strip to a DataTable when the page loads. The DataTable contains a "Roles" column that does not map to a property of the tabs:

 

The "Roles" column is mapped to a custom attribute in the TabDataBound event handler. The event handler also sets the ToolTip property of the tab to the value of its custom attribute to allow for testing of the custom attribute:

 

See Also