MS Ajax Tab Control: Index of the Tab Containing a Control

The Problem

I have an Ajax Tab Container that contains several tabs. On one of those tabs, I have a control. On the client, how do I find out which tab contains the control?

The Solution

Here is the JavaScript function that I used to solve this problem. In the following code, my tab container is called “Main_TabContainer”.  

function getContainingTabIndex(targetControl)
{

  // Get a reference to the tabs.
  var tabs = $find('<%=Main_TabContainer.ClientID %>').get_tabs();

  // Start with the control that we want to find.
  var testControl = targetControl;

  // While we have not got to the top of the control heirarchy, nor found the control...
  while (targetControl!=null)
  {

    // For each of the tab panels...
    var tabIndex;
    for (tabIndex = 0; tabIndex < tabs.length; tabIndex++)
      {
      // If this tab panel contains the target control...
      if (tabs[tabIndex].get_element() == testControl)
      {
        return tabIndex;
        break;
      }
    } // Next index.

    // Walk up the DOM to seek out the tab panel that contains the target control.
    testControl = testControl.parentNode;

  } // Wend.

  // The control is not contained in a tab panel.
  return -1;
}
Advertisements

3 Responses to MS Ajax Tab Control: Index of the Tab Containing a Control

  1. Gaurav Srivastava says:

    HI;
    If you want to find clicked index of a in code behind(C#); I hope this will help You:

    ————————-Code———————————————

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;

    public partial class TabControl : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    TabContainer1_ActiveTabChanged(TabContainer1, null);
    }
    }
    protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
    {
    DataTable dTable_rgstrtn = null;
    DataTable dTable_btch = null;
    DataTable dTable_crs = null;

    try
    {
    if (TabContainer1.ActiveTabIndex == 0)
    {
    dTable_rgstrtn = new DataTable();

    dTable_rgstrtn.Columns.Add(“stdnt_cd”);
    dTable_rgstrtn.Columns.Add(“rgstrtn_cd”);
    dTable_rgstrtn.Columns.Add(“sbjct_chsn”);
    dTable_rgstrtn.Columns.Add(“stdnt_stts”);

    dTable_rgstrtn.Rows.Add(dTable_rgstrtn.NewRow());

    dTable_rgstrtn.Rows[0][“stdnt_cd”] = “S0080032003023”;
    dTable_rgstrtn.Rows[0][“rgstrtn_cd”] = “R0080032003023”;
    dTable_rgstrtn.Rows[0][“sbjct_chsn”] = “ASP.NET 3.0, SQL 2005, XML”;
    dTable_rgstrtn.Rows[0][“stdnt_stts”] = “VALID”;

    GridView1.DataSource = dTable_rgstrtn;
    GridView1.DataBind();
    GridView1.Visible = true;
    }

    if (TabContainer1.ActiveTabIndex == 1)
    {
    dTable_btch = new DataTable();

    dTable_btch.Columns.Add(“btch_cd”);
    dTable_btch.Columns.Add(“smstr_cd”);
    dTable_btch.Columns.Add(“smstr_vrsn”);
    dTable_btch.Columns.Add(“mx_nmbr_stdnt”);

    dTable_btch.Rows.Add(dTable_btch.NewRow());

    dTable_btch.Rows[0][“btch_cd”] = “B0001”;
    dTable_btch.Rows[0][“smstr_cd”] = “SM100”;
    dTable_btch.Rows[0][“smstr_vrsn”] = “1.00”;
    dTable_btch.Rows[0][“mx_nmbr_stdnt”] = “20”;

    GridView2.DataSource = dTable_btch;
    GridView2.DataBind();
    GridView2.Visible = true;
    }

    if (TabContainer1.ActiveTabIndex == 2)
    {
    dTable_crs = new DataTable();

    dTable_crs.Columns.Add(“crs_ttl”);
    dTable_crs.Columns.Add(“crs_drtn”);
    dTable_crs.Columns.Add(“smrt_crd_rqrd”);

    dTable_crs.Rows.Add(dTable_crs.NewRow());

    dTable_crs.Rows[0][“crs_ttl”] = “Introducing ASP.NET 3.5”;
    dTable_crs.Rows[0][“crs_drtn”] = “48 Hrs”;
    dTable_crs.Rows[0][“smrt_crd_rqrd”] = “Yes”;

    GridView3.DataSource = dTable_crs;
    GridView3.DataBind();
    GridView3.Visible = true;
    }

    }
    catch
    {
    throw;
    }
    finally
    {

    }

    }
    }

  2. Anil says:

    You can also set the tab index from code behind
    like in c#
    TabContainer1.ActiveTab = TabPanel1;
    its easy and working any doubts mail me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: