locked
ajaxToolkit TabContainer question RRS feed

  • Question

  • User-125499312 posted

    <g class="gr_ gr_17 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="17" data-gr-id="17">i</g> have an ajaxToolkit TabContainer - can <g class="gr_ gr_21 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="21" data-gr-id="21">i</g> run some code when the user clicks on a tab?

    thx for ur help

    Thursday, October 18, 2018 1:41 AM

All replies

  • User61956409 posted

    Hi yzidell,

    yzidell

    have an ajaxToolkit TabContainer - can i run some code when the user clicks on a tab?

    You can achieve your requirement in ActiveTabChanged Event, you can refer to the following sample code.

    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="true" OnActiveTabChanged="TabContainer1_ActiveTabChanged">
        <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
            <ContentTemplate>
                <h1>Tab1 content</h1>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">
                <ContentTemplate>
                <h1>Tab2 content</h1>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <ContentTemplate>
                <h1>Tab3 content</h1>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    <br />
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
    {
        //your code logic here
    
        Label1.Text = "Active Tab Index is " + TabContainer1.ActiveTabIndex;
    }

    Test Result:

    Note:

    The ajaxToolkit TabContainer control also provides some client side events, such as OnClientActiveTabChangedOnClientClick (for TabPanel), you can get detailed information in it's documentation.

    With Regards,

    Fei Han

    Thursday, October 18, 2018 1:57 AM
  • User2103319870 posted

    TabPanel has a property called OnClientClick. You can use that to execute javascript code

      <script>
                    function tabclick() {
                        alert("Tab Clicked");
                    }
                </script>
      <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
                    <ajaxToolkit:TabPanel runat="server" ID="Panel2" HeaderText="Tab1" OnClientClick="tabclick">
                        <ContentTemplate>
                            <input id="Button1" type="button" value="button" />
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                    <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="Tab2" OnClientClick="tabclick">
                         <ContentTemplate>
                            <input id="Button2" type="button" value="button" />
                        </ContentTemplate>
                    </ajaxToolkit:TabPanel>
                </ajaxToolkit:TabContainer>

    Thursday, October 18, 2018 2:02 AM