Search code examples
asp.netajaxdynamic-data

dynamic ActiveTabChanged for AJax Tab container


How to fire ActiveTabChanged for TabContainer. I have written a code to populate the TabPanel HeaderText from the database and this is my code

public partial class dynamicTab : System.Web.UI.Page
{
    string strCon = ConfigurationManager.ConnectionStrings["SqlCon"].ConnectionString.ToString();
    TabContainer ajxTab;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
           // createTab();
            pnlDynamic.Controls.Add(ajxTab);
            ajxTab_ActiveTabChanged(ajxTab, EventArgs.Empty);
        }
    }

    private void ajxTab_ActiveTabChanged(TabContainer ajxTab, EventArgs eventArgs)
    {
        SqlConnection con = new SqlConnection(strCon);
        SqlCommand cmd = new SqlCommand("select * from Employee where DeptID='" + ajxTab.ActiveTab.ID.ToString() + "'", con);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter();
        da.SelectCommand = cmd;
        DataSet ds = new DataSet();
        da.Fill(ds);

        GridView grd = new GridView();
        grd.AutoGenerateColumns = true;
        grd.DataSource = ds;
        grd.DataBind();
        pnlDynamic.Controls.Add(grd);
    }

    protected void page_init(object sender, eventargs e)
    {
        createtab();

    }

    private void createTab()
    {
        SqlConnection con = new SqlConnection(strCon);
        SqlCommand cmd = new SqlCommand("select DeptID,DepartmentName from Department", con);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter();
        da.SelectCommand = cmd;
        DataSet ds = new DataSet();
        da.Fill(ds);
        ajxTab = new AjaxControlToolkit.TabContainer();
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            TabPanel pnl = new TabPanel();
            pnl.HeaderText = ds.Tables[0].Rows[i]["DepartmentName"].ToString();
            pnl.ID = ds.Tables[0].Rows[i]["DeptID"].ToString();
            ajxTab.Tabs.Add(pnl);
            ajxTab.ActiveTabIndex = 0;
        }
    }
}

For the first time ActiveTabChanged fired perfectly , but when I click on the second tab ActiveTabChanged is not getting fired. I tried by setting ajxTab.AutoPostBack=true but the tab container is not getting visible when the event occurs.

This is my sample output

enter image description here

On clicking computers I would like to load grid with those details so can some one help me


Solution

  • You can bind the content of each tab in the OnActiveTabChanged event

    OnActiveTabChanged="TabContainer1_ActiveTabChanged" AutoPostBack="true"