Tabs Control: How to determine and set tabIndex clientside?

Last post 04-23-2008 4:14 AM by deblendewim. 3 replies.

Sort Posts:

  • Tabs Control: How to determine and set tabIndex clientside?

    04-21-2008, 10:01 PM
    • Member
      287 point Member
    • pardo
    • Member since 11-11-2004, 11:54 AM
    • Posts 92

    I have a tabPanel that uses .OnClientClick to fire a javascipt function.

     

    1. In the function, I'd like to know which tab is currently displayed.

    2. In the function, I'd like the ability to set the tabIndex.

     

    Any help would be welcome.

     

    pardo

  • Re: Tabs Control: How to determine and set tabIndex clientside?

    04-22-2008, 9:14 AM
    Answer
    • Contributor
      5,590 point Contributor
    • deblendewim
    • Member since 12-20-2006, 11:32 AM
    • Antwerp, Belgium
    • Posts 951

    Hi pardo,

    Run the example I added below. Then press the button.

    I hope the example is straightforward enough. If you have any questions please let me know.

    Kind regards,
    Wim

     

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabContainer7.aspx.vb" Inherits="TabContainer7" %>
    
    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    	Namespace="System.Web.UI" TagPrefix="asp" %>
    
    <!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>Untitled Page</title>
        <script type="text/javascript">
        function myFunction()
        {
    		
    		var myTabContainer = $find('TabContainer1');
    		var activeTab = myTabContainer.get_activeTabIndex();
    		alert('active tab index = ' + activeTab);
    		if (confirm('Change active tab?'))
    		{
    			myTabContainer.set_activeTabIndex(0);
    		}
    		
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
    		<asp:ScriptManager ID="ScriptManager1" runat="server">
    		</asp:ScriptManager>
        
        </div>
    		<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
    			<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
    				<ContentTemplate>
    					Tab1
    				</ContentTemplate>
    			</cc1:TabPanel>
    			<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
    				<ContentTemplate>
    					Tab2
    				</ContentTemplate>
    			</cc1:TabPanel>
    		</cc1:TabContainer><br />
    		<input id="Button1" type="button" value="button" onclick="myFunction()" />
        </form>
    </body>
    </html>
     
    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
  • Re: Tabs Control: How to determine and set tabIndex clientside?

    04-22-2008, 7:45 PM
    • Member
      287 point Member
    • pardo
    • Member since 11-11-2004, 11:54 AM
    • Posts 92

    deblendewim, thanks so much for the great example, it got me to where I needed to get.

     

    1 more question: How on earth did you find this function? Was it from a doc, someone else on the web, or you had a look at the source code? I'm tryin to pull all the pieces together here.

     

    Thanks again!

     

    pardo

     

  • Re: Tabs Control: How to determine and set tabIndex clientside?

    04-23-2008, 4:14 AM
    Answer
    • Contributor
      5,590 point Contributor
    • deblendewim
    • Member since 12-20-2006, 11:32 AM
    • Antwerp, Belgium
    • Posts 951

    Hi pardo,

    More info about the $find method and others can be found here : http://asp.net/AJAX/Documentation/Live/ClientReference/default.aspx

    About the client-side functions of the tabcontainer and other toolkit controls: Well I just found out about them by playing with them while debugging.

    This is how I do it (in Visual Studio 2005, because debugging of javascript in VS2008 is much easier!!):

    • In your javascript code place the following as your first line in the function: var a = b;
    • Then in your internet explorer you have to enable client script debugging. You can do this by checking-out the "Disable script debugging (Internet Explorer)" . Remember to check the option again after debugging. Otherwise you constantly get error messages :)
    • Then when you run the page (for example my page) and press the button, you get an error in your brower. It asks you to debug and then you say yes!
    • NOW you are debugging your javascript code!!!!!!
    • To get over the var a = b; line in the javascript, just drag the yellow arrow to the next line.
    • Then press F11 (default key) to execute line by line.
    • After the var myTabContainer is initialised, you can hover over the myTabContainer variable and see all its methods/properties.
    • Then experiment with them!

     

    I hope all the above is clear enough, if you have questions please let me know.

    Kind regards,
    Wim

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
Page 1 of 1 (4 items)