We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render a tab having different grids with SQL datasource as tab items from code behind ?

Platform: ASP.NET Web Forms |
Control: Tab


We are creating a Tab control in code behind and adding Grid control as a tab item with data source from SQL database. Also, we are binding data to second grid on the selecting the second tab item in client side using the data stored in session.


Define a place holder for the tab control render. Then in code behind we are connecting to the database and fetching the data from SQL database.

Refer the following code block:


    <asp:PlaceHolder ID="MyPlace" runat="server"></asp:PlaceHolder>

CodeBehind- [C#]

string [] tableNames = new string [2];
protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)
        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString());
        fetchDataSource("select * from TabDataSource", "TabDataSource", myConnection);
        fetchDataSource("select top 10 CustomerID,ContactName,Address,City,Phone from Customers", "Customers", myConnection);
        fetchDataSource("select top 10 OrderID,CustomerID,ShipName,Freight,ShipCity from Orders", "Orders", myConnection);
        tableNames[0] = "Customers";
        tableNames[1] = "Orders";
        DataTable dtorders = (DataTable)Session["Orders"];
        String jsonString = string.Empty;
        jsonString = JsonConvert.SerializeObject(dtorders);
        Session["jsonString"] = jsonString;

In the fetchDataSource method we are passing the SQL queries, table name and connection string to access the SQL database and fill the data table with data from the data base and store the data in session.

Refer the following code block:

 CodeBehind- [C#]

public void fetchDataSource(string query, string tableName, SqlConnection connectionString)
    DataTable dt3 = new DataTable("tableName");
    SqlCommand cmd3 = new SqlCommand();
    cmd3.Connection = connectionString;
    cmd3.CommandText = query;
    cmd3.CommandType = CommandType.Text;
    SqlDataAdapter da3 = new SqlDataAdapter();
    da3.SelectCommand = cmd3;
    if (connectionString.State == ConnectionState.Closed)
    Session[tableName] = dt3;

In dataBind Method, we are initializing the Tab control, adding ID attribute and Client side events for binding data to other grid controls only when the tab item is selected. Then we are adding text and ID for tab item and render the grid control inside the tab content only once. For second grid, we render only div element. Using the div element we can render the grid on client side events. Then we add the control in the aspx page using asp placeholder.

Refer the following code block:

 CodeBehind- [C#]

protected void dataBind()
    DataTable das = (DataTable)Session["TabDataSource"];
    Tab tab1 = new Tab();
    tab1.ID = "MyTab";
    tab1.ClientSideOnBeforeActive = "ontabbeforeactive";
    int count = 1;
    foreach (DataRow row in das.Rows)
        TabItem ti1 = new TabItem();
        ti1.Text = row["TabItems"].ToString();
        ti1.ID = row["TabItems"].ToString();
        if (count == 1)
            Grid grid1 = new Grid();
            grid1.ID = "grid" + count.ToString();
            grid1.DataSource = (DataTable)Session[tableNames[count - 1]];
            grid1.Style.Add("display", "none");
            System.Web.UI.HtmlControls.HtmlGenericControl item = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            item.ID = "grid2";                    


Output of the above code,

Grid with SQL data binding rendered inside Tab control

Figure 1: Grid with SQL data binding rendered inside Tab control

Now to add a second grid and do databinding, we use the client side BeforeActive event. We access the SQL data source for the second grid from the session and render the second grid using JavaScript code.

Refer the following code block:


    <script type="text/javascript">
     var obj;
     function ontabbeforeactive(args) {
         var jsonstring = '<%= Session["jsonString"] %>';
         jsonstring = JSON.parse(jsonstring);
         if (!obj && args.activeIndex==1) {
             obj = $("#MainContent_MyTab_grid2").ejGrid({
                 "dataSource": jsonstring, 
                 columns: ["OrderID", "CustomerID", "ShipName", "ShipCity", "Freight"]

Output of the above code,

Grid with SQL data binding rendered inside Tab control using BeforeActive event

Figure 2: Second Grid with SQL data binding rendered inside Tab control using client side BeforeActive method


2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile