Edit this page

Working With Tabs at the Client

RadTabStrip provides a client-side API for adding, deleting and disabling tabs. By using the trackChanges and commitChanges methods of the client-side RadTabStrip object, these changes can persist after a postback.

Adding tabs

To add a tab, use the add or insert method of the tabs collection:

function AddNewTabs()
{ 
    var tabstrip = $find("<%= RadTabStrip1.ClientID %>");
    var roottab = new Telerik.Web.UI.RadTab();
    roottab.set_text("New Root Tab");
    var childTab = new Telerik.Web.UI.RadTab();
    childTab.set_text("New Child Tab");
    var firstChild = new Telerik.Web.UI.RadTab();
    firstChild.set_text("New First Child");

    tabstrip.trackChanges();
    tabstrip.get_tabs().add(roottab);
    roottab.get_tabs().add(childTab);
    roottab.get_tabs().insert(0, firstChild);
    tabstrip.commitChanges();
}               

Removing tabs

Use the remove or removeAt method of the tabs collection to remove tabs:

function RemoveTab()
{
  var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
  var tab = tabStrip.findTabByText("delete me");
  if (tab)
  {
    var parentTab = tab.get_parent();
    tabStrip.trackChanges();
    parentTab.get_tabs().remove(tab);
    // or
    parentTab.get_tabs().removeAt(tab.get_index());
    tabStrip.commitChanges();
  }
}               

Enabling and Disabling items

Use the disable and enable methods of the tabs collection to disable or enable items:

function DisableItem()
{     
    var tabStrip = $find("<%= RadTabStrip1.ClientID%>");
    var tab = tabStrip.findTabByText("disable me");
    if(tab)
    {
        tabStrip.trackChanges();
        tab.disable();         
        tabStrip.commitChanges();
    }
}

function EnableItem()
{
   var tabStrip = $find("<%= RadTabStrip1.ClientID%>");
   var tab = tabStrip.findTabByText("enable me");
   if(tab && !tab.get_isEnabled())
   {
        tabStrip.trackChanges();
        tab.enable();         
        tabStrip.commitChanges();
   }
}       

See Also