Articles in this section
Category / Section

How to render a tab having different Grid with SQL datasource as tab items from code behind in .NET?

3 mins read

Description

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.

Solution

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:

[ASPX]

    <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";
 
        dataBind();
        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)
    {
        connectionString.Open();
    }
    da3.Fill(dt3);
    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.DataBind();
            grid1.Style.Add("display", "none");
            ti1.ContentSection.Controls.Add(grid1);
                    
        }
        else
        {
            System.Web.UI.HtmlControls.HtmlGenericControl item = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            item.ID = "grid2";                    
            ti1.ContentSection.Controls.Add(item);
        }
               
        tab1.Items.Add(ti1);
        count++;
          
    }
    MyPlace.Controls.Add(tab1);
          
          
}

 

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:

[ASPX]

    <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"]
             }).data("ejGrid");
         }
           
     }
 </script>

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

Note:

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied