ajaxToolkit TabContainer question

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

Answer 1

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 OnClientActiveTabChanged, OnClientClick (for TabPanel), you can get detailed information in it's documentation.

With Regards,

Fei Han

Answer 2

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>