ajaxToolkit TabContainer questionRSS

• • Reply
  yzidell

  Member

  23 Points

  604 Posts

  ajaxToolkit TabContainer question

  Oct 18, 2018 01:41 AM|yzidell|LINK

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

  thx for ur help

• • Reply
  Fei Han - MS...

  All-Star

  38886 Points

  5599 Posts

  Microsoft

  Re: ajaxToolkit TabContainer question

  Oct 18, 2018 01:57 AM|Fei Han - MSFT|LINK

  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

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.
  
• • Reply
  A2H

  All-Star

  50601 Points

  9821 Posts

  Re: ajaxToolkit TabContainer question

  Oct 18, 2018 02:02 AM|A2H|LINK

  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>

  Thanks,
  Aje
  My Blog | Dotnet Funda