Edit this page

Custom Attributes

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:

<telerik:RadTabStrip RenderMode="Lightweight" 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.

protected voidRadTabStrip1_TabClick1(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
{
if (e.Tab.Attributes["state"] == "visited")
{
  Label label =
  e.Tab.PageView.FindControl(e.Tab.Attributes["labelName"]) as Label;
  label.Text = "Welcome Back";
}
  else e.Tab.Attributes["state"] = "visited";
}               
Protected Sub RadTabStrip1_TabClick1(ByVal sender As Object, _ByVal e AsTelerik.Web.UI.RadTabStripEventArgs) _Handles
    RadTabStrip1.TabClick()
    If e.Tab.Attributes("state") = "visited" Then
        Dim label As Label =
     TryCast(e.Tab.PageView.FindControl(e.Tab.Attributes("labelName")), 
     Label)
        label.Text = "Welcome Back"
    Else
        e.Tab.Attributes("state") = "visited"
    End If
End Sub 

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:

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:

protected void Page_Load(object sender, EventArgs e)
{
      if (!Page.IsPostBack)
      {
         //dynamically crate a table to populate
    the tab strip
         DataTable table1 = new DataTable(); 
         table1.Columns.Add("ID");
         table1.Columns.Add("ParentID");
         table1.Columns.Add("Roles"); // for the custom attribute
         table1.Columns.Add("Text");
         table1.Rows.Add(new string[] { "1", null, "A", "Politics" });
         table1.Rows.Add(new string[] { "2", null, "B", "Sports" });
         table1.Rows.Add(new string[] { "3", null, "C", "Events" });
         table1.Rows.Add(new string[] { "4", "1", "D", "CNN" });
         table1.Rows.Add(new string[] { "5", "1", "E", "NBC" });
         table1.Rows.Add(new string[] { "6", "1", "F", "ABC" });
         table1.Rows.Add(new string[] { "7", "2", "G", "US Sports" });
         table1.Rows.Add(new string[] { "8", "2", "B", "European Sports" });
         table1.Rows.Add(new string[] { "9", "7", "D", "Baseball" });
         table1.Rows.Add(new string[] { "10", "7", "C", "Football" });
         table1.Rows.Add(new string[] { "11", "7", "B", "Basketball" });
         table1.Rows.Add(new string[] { "12", "8", "D", "Soccer" });
         table1.Rows.Add(new string[] { "14", "3", "E", "Oscar Awards" });
         table1.Rows.Add(new string[] { "15", "3", "B", "MTV Movie Awards" });
         RadTabStrip1.DataSource = table1;
         RadTabStrip1.DataFieldID = "ID";
         RadTabStrip1.DataFieldParentID = "ParentID";
         RadTabStrip1.DataTextField = "Text";
         RadTabStrip1.DataBind();
       }
}               
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        'dynamically crate a table to populate the menu
        Dim table1 As New DataTable()
        table1.Columns.Add("ID")
        table1.Columns.Add("ParentID")
        table1.Columns.Add("Roles") ' the column for the custom attributes()
        table1.Columns.Add("Text")
        table1.Rows.Add(New String() {"1", Nothing, "A", "Politics"})
        table1.Rows.Add(New String() {"2", Nothing, "B", "Sports"})
        table1.Rows.Add(New String() {"3", Nothing, "C", "Events"})
        table1.Rows.Add(New String() {"4", "1", "D", "CNN"})
        table1.Rows.Add(New String() {"5", "1", "E", "NBC"})
        table1.Rows.Add(New String() {"6", "1", "F", "ABC"})
        table1.Rows.Add(New String() {"7", "2", "G", "US Sports("})")
        table1.Rows.Add(New String() {"8", "2", "B", "European Sports("})")
        table1.Rows.Add(New String() {"9", "7", "D", "Baseball"})
        table1.Rows.Add(New String() {"10", "7", "C",  "Football"})
        table1.Rows.Add(New String() {"11", "7", "B", "Basketball"})
        table1.Rows.Add(New String() {"12", "8", "D", "Soccer"})
        table1.Rows.Add(New String() {"14", "3", "E", "Oscar Awards("})")
        table1.Rows.Add(New String() {"15", "3", "B", "MTV Movie Awards("})")
        RadTabStrip1.DataSource = table1
        RadTabStrip1.DataFieldID = "ID"
        RadTabStrip1.DataFieldParentID = "ParentID"
        RadTabStrip1.DataTextField = "Text"
        RadTabStrip1.DataBind()
    End If
End Sub 

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:

protected void RadTabStrip1_TabDataBound(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
{
    DataRowView dataRow = (DataRowView)e.Tab.DataItem;
    e.Tab.Attributes["Roles"] = dataRow["Roles"].ToString();
    e.Tab.ToolTip = e.Tab.Attributes["Roles"];
}               
Protected Sub RadTabStrip1_TabDataBound(ByVal sender As Object, _ByVal e As Telerik.Web.UI.RadTabStripEventArgs) _Handles RadTabStrip1.TabDataBound
    Dim dataRow As DataRowView = DirectCast(e.Tab.DataItem, DataRowView)
    e.Tab.Attributes("Roles") = dataRow("Roles").ToString()
    e.Tab.ToolTip = e.Tab.Attributes("Roles")
End Sub             

See Also