HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

  • Comments 16

I have seen this in the forums a lot ..

"How do I change the Visible Tab in the MS AJAX TabControl on the Client-Side using Javascript ?"

Well, I have posted it several times and I think Its time I'd rather point people to a link than write the same piece again and again :-).

So, here you go .....

1) Consider that you have a TabControl on your page by the name of "MyTabs" .

<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
//blah blah blah
</ajaxToolKit:TabContainer>
2) You can access the Methods exposed by the TabControl by accessing its  behavior.
   The Behavior is not accessible easily . 
   The  TabControl has a property called as "control" that provides a way to access the Client-Side Methods of the 
   TabControl.
   EX: var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
3) once you have a handle to the Tabbehavior , you can use the "set_activeTab" method to set the Active Tab of the TabControl.
   EX:tabBehavior.set_activeTabIndex(1); 
4)  You are Done !!
 
Complete  Code for the ChangeTab Function :
<script language="javascript"> 

function changeTab( tabIndex ){ 
var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
tabBehavior.set_activeTabIndex(tabIndex); 
}
</script> 
The Complete Example is posted below :
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Select Tabs By Script</title>
</head>
<body>
    <form id="frmAccessAccordion" runat="server">

        <script language="javascript">
        function changeTab(){ 
        //Get The Index of the Current Selected Index in the DropDownList
        var tabIndex = parseInt( $get('<%=dlTabindex.ClientID%>').value );
        //Get a Handle to the Tab Behavior 
        var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
        //Set the Currently Visible Tab 
        tabBehavior.set_activeTabIndex(tabIndex); 
        }
        </script>
        Select Tab To Show :
        <asp:DropDownList runat="server" ID="dlTabindex">
            <asp:ListItem Text="One" Value="0"></asp:ListItem>
            <asp:ListItem Text="Two" Value="1"></asp:ListItem>
            <asp:ListItem Text="Three" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnDynamicAnimate" runat="server" Text="Button" OnClientClick="changeTab();return false;" />
        <asp:ScriptManager runat="server" ID="scrpManager" EnablePartialRendering="true">
        </asp:ScriptManager>
        <ajaxToolKit:TabContainer ID="MyTabs" runat="server">
            <ajaxToolKit:TabPanel runat="server" ID="tabOne">
                <HeaderTemplate>
                    One
                </HeaderTemplate>
                <ContentTemplate>
                    Tab One
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabTwo">
                <HeaderTemplate>
                    Two
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Two
                    <asp:Button runat="server" ID="btnServer" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabThree">
                <HeaderTemplate>
                    Three
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Three
                    <asp:Button runat="server" ID="Button1" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
        </ajaxToolKit:TabContainer>
    </form>
</body>
</html>
 
Leave a Comment
  • Please add 8 and 7 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Great article, very usable and extendable. Thank you!

    (bs.)

  • Cool!

  • That's easy enough but do you know how I could change tabs by clicking on a link button in a row of a gridview control?

    I've tried changing the tab by using lines such as:

    tabcontainer.ActiveTab=tab2;

    &

    tabcontainer.ActiveTabIndex=1;

    and neither of these result in the tab changing.

  • AJAX Toolkit now has a tab control - as you start using it one of the things you might want to do is...

  • I'm getting IE script error saying that Sys. is undefined when loading in the page and none of the tabs come up when I select from dropdown list. I'm using VS2005.

    How do I fix this error?

    Thanks

  • In case you don't wanna mix "server" code within your javascript, instead of doing:

    var tabBehavior = $get('<%=MyTabs.ClientID%>').control;

    you can do:

    var tabBehavior = $find('MyTabs');

    Regards,

    PS: you can follow the same approach to get the drop down list control.

  • Hi Santiago,

    The Reason I put in the Expression to evaluate the ClientID is , as anyone who develops with asp.net 2.0 knows , the ClientIDs of the Controls get changed if a MasterPage comes into the Picture .

    Or for that matter , any naming container that changes the Client-Side ID of the Control.

    $find('MyTabs') would work in case I specified the BehaviorID of the TabControl in its markup.

    At the Time of writing of this Post , the behavior had to be accessed in the way I have shown above.

    Thanks,

    Raj

  • My tabcontainer is in a DataList.

    Using the following, I get a build error becuase it can't find TabContainer.

    $get('<%=TabContainer1.ClientID%>')

    So I have to do this:

    $get('ctl00_ContentPlaceHolder1_PropertyView_ctl00_TabContainer1')

    This is naf, how can I find the ClientID so I don't have to specify it in full?

  • I have a tab container and some tab panels, the container is in an UpdatePanel. In one of the tabs I have a button which when clicked does some server side work and makes another control visible

    The problem was, once the button was clicked the tab lost its focus and the first tab appeared.

    I tried using

    TabContainer1.ActiveTab, and also

    TabContainer1.ActiveTabIndex, with the tab's TabIndex and it didnt work. so i did it using scriptmanager

    UI_Utils.AjaxDoScript(this, "var tabIdx=$find('" + tabModifyQuestion.ClientID + "')._tabIndex;" +

    "$find('" + TabContainer1.ClientID + "').set_activeTabIndex(tabIdx);", 200);

    public static void AjaxDoScript(Control c, string body, int timeout)

       {

           Random rnd = new Random();

           string functionName = "ajaxDo" + rnd.Next(100, 999);

           StringBuilder sb = new StringBuilder("function ");

           sb.Append(functionName);

           sb.Append("(){window.clearTimeout(");

           sb.Append(functionName);

           sb.AppendFormat(");{0}", body);

           sb.Append("}window.setTimeout");

           sb.AppendFormat("({0},{1});",

             functionName, timeout);

           ScriptManager.RegisterClientScriptBlock(c, c.GetType(), "tmp_" + functionName, sb.ToString(), true);

       }

    this worked

  • In un sito web a cui sto lavorando ho inserito in una pagina il controllo Tabs dell&#39;AJAX Control

  • Thanx for the article.

    I was a long time trying to figure out why set_activeTabIndex wasn't working for me.

    Your point to the ".control" element of the tab container saved me a lot of time.

  • Also wanted to share an example for setting active Index when you have validators in different tabs.

    You can create javascript method such as:

    function RunValidationsAndSetActiveTab() {

               if (typeof (Page_Validators) == "undefined") return;

               try {

                   var noOfValidators = Page_Validators.length;

                   for (var validatorIndex = 0; validatorIndex < noOfValidators; validatorIndex++) {

                       var validator = Page_Validators[validatorIndex];

                       ValidatorValidate(validator);

                       if (!validator.isvalid) {

                           var tabPanel = validator.parentElement.control;

                           var tabContainer = tabPanel.get_owner();

                           tabContainer.set_activeTabIndex(tabPanel.get_tabIndex());

                           break;

                       }

                   }

               }

               catch (Error) {

                   alert("Failed");

               }

           }

    In the button that is used to submit all the tabs at once where each tab has set of validations you can call the above method on click of button on client side such as:

    <asp:Button ID="btnSaveResponse" Text="Submit Response" runat="server" OnClick="btnSaveResponse_Click"

                OnClientClick="RunValidationsAndSetActiveTab();" />

  • The .control was what I was missing - thank you so much!

  • hi,

    thanks a lot for this cool tip

    how did you find out that it was the control property?

Page 1 of 2 (16 items) 12