Friday, December 21, 2012

Create dynamical Ajax Tab and filling data from database

I have attended an interview, there I asked a question like how to create a Tab container in asp.net dynamically with the department name from the database, and on selecting the particular Tab we would like to show the corresponding information of that department.

Here is a way to implement the task

First of all create 2 tables namely Employee and Department with a foreign key relation.

Employee table should contain the following columns ID(primary key), FirstName, LastName, DeptID(which is a foreign key)

Department table should contain the following columns DeptID(Primary key) and DepartmentName

Insert some data to the two tables as per our requirement, my sample data in the tables is as follows





Now as per our requirement I would like to show the department names on the Tabs. I used AJAX TabContainer 

Place a panel initially on the web form so that you design should be as follows


Your code should be like as follows
As I created an SqlDatabase file I have my connection string in web.config is as follows

<connectionStrings>
<add name="SqlCon" connectionString="data source=.\SQLEXPRESS;attachdbfilename=|DataDirectory|\NonPrimaryKeyTable.mdf;integrated security=True;user instance=True;" />
</connectionStrings>

You can change the connectionstring as per your requirement.



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();
                
                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);
                for (int i = 0; i &lt; ds.Tables[0].Rows.Count; i++)
                {
                    Table tblDynamic = new Table();
                    TableRow tbrDynamic = new TableRow();
                    TableCell tbcDynamic = new TableCell();

                    GridView grdDyanmic = new GridView();
                    grdDyanmic.AutoGenerateColumns = true;

                    SqlCommand cmd1 = new SqlCommand("select * from Employee where DeptID='" + ds.Tables[0].Rows[i]["DeptID"].ToString() + "'", con);
                    SqlDataAdapter da1 = new SqlDataAdapter();
                    DataSet ds1 = new DataSet();
                    da1.SelectCommand = cmd1;
                    da1.Fill(ds1);
                   grdDyanmic.DataSource = ds1;
                    grdDyanmic.DataBind();
                    tbcDynamic.Controls.Add(grdDyanmic);
                    tbrDynamic.Cells.Add(tbcDynamic);
                    tblDynamic.Rows.Add(tbrDynamic);
                    ajxTab.Tabs[i].Controls.Add(tblDynamic);
                }
                pnlDynamic.Controls.Add(ajxTab);
            }
        }

        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 &lt; ds.Tables[0].Rows.Count; i++)
            {
                TabPanel tbpnlDynamic = new TabPanel();
                tbpnlDynamic.HeaderText = ds.Tables[0].Rows[i]["DepartmentName"].ToString();     
                tbpnlDynamic.ID = ds.Tables[0].Rows[i]["DeptID"].ToString();          // Here I am assigning DeptID to the TabPanel so that it will be easy to retrieve the data what we needed from database
                ajxTab.Tabs.Add(tbpnlDynamic);
                ajxTab.ActiveTabIndex = 0;
            }
        }
    }


Finally the output will be as follows



Hope you enjoyed the article, if any questions or queries please let me know.



Any comments welcome..



14 comments:

  1. Wow, marvelous blog format! How long have you been blogging for? you make running a blog glance easy. The total glance of your website is excellent, let alone the content material!
    Create a MySQL database.

    ReplyDelete
  2. Hi Rony, I didn't get you, is it a positive comment or some other.

    ReplyDelete
  3. Plz help, we are creating an application just like this, the only difference is that
    1) we want to dynamically create a tab if new Department is Added
    2) On the grid we want insert, update , delete also
    // and can it been done using sqldatasouce also, please show

    We have already created some of its functionality , using the grid view in user control, but we r not able 2 edit,
    and thanks in advance

    ReplyDelete
  4. Can you show me some sample images of your work so that I can help you if I can

    ReplyDelete
  5. Hi Dorababu.. nice explanation. can you please give me an example how to Create TextBox control dynamically in Ajax TabContainer..
    Thanks in advance..

    ReplyDelete
  6. Nagraj, thanks for your comment.Yes you can in the same way instead of grid u can place your needed controls there. The only thing you need to do is to call the method in page_int if you want to do any kind of operations.. Tell me if you have any specific requirement so that I can help you

    ReplyDelete
  7. I think this might help you http://www.c-sharpcorner.com/uploadfile/Ravish001/create-dynamic-tabs-using-ajax-tab-container-add-controls-read-them-dynamically/

    ReplyDelete
  8. Hello, Nice Blog, I am new to programming. I tried to execute your code. i am getting following errors in for loop

    1) Only assignment, call, increment, decrement,await, and new object expressions can be used as a statement [this error in on ds.Tables[0].Rows.Count;]
    2)name "lt" does not exist in current context.
    3) name "i" does not exist in current context.
    Please help me...Thanks in Advance

    ReplyDelete
    Replies
    1. Hi there might be some mistake your code should be for (int i = 0; i <ds.Tables[0].Rows.Count; i++)

      Delete
  9. Thanks for replying Dorababu.. What i am trying to do is instead of grid i want to display dynamically created textbox with label inside the tabs(may be like forms). and it should be linked with the database as you have done with the grid..Please help me with this by giving simple example..
    Thanks in advance..

    ReplyDelete
    Replies
    1. Hi have you tried as per the link I posted? Linked with the database means do you want to save the information to database or want to load the data from database

      Delete
  10. hi, I tried using the link u posted, but i am not getting it. I want to save the information of the data entered to database.
    Please help me..

    ReplyDelete
  11. it gives me error:

    "Value cannot be null or empty.
    Parameter name: componentID"

    ReplyDelete
  12. Hi, i tried the same code but it showing blank page , please see the code
    protected void page_init(object sender, EventArgs e)
    {
    getPanels();
    }

    public void getPanels()
    {
    con.Open();

    SqlCommand cmd = new SqlCommand("select CategoryId,CategoryName from Category", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);

    ajxTab = new AjaxControlToolkit.TabContainer();
    tbcPanel = new AjaxControlToolkit.TabPanel();

    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {

    tbcPanel.HeaderText = ds.Tables[0].Rows[i]["CategoryName"].ToString();
    tbcPanel.ID = ds.Tables[0].Rows[i]["CategoryId"].ToString(); // Here I am assigning DeptID to the TabPanel so that it will be easy to retrieve the data what we needed from database
    ajxTab.Tabs.Add(tbcPanel);
    ajxTab.ActiveTabIndex = 0;
    }


    con.Close();
    }

    ReplyDelete

Popular Posts