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. (Last updated on : Nov 16th 2018).
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 ?

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]

CodeBehind- [C#]

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#]

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#]

 

Output of the above code,

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]

Output of the above code,

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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7786 06/22/2017 06/22/2017 ASP.NET Web Forms Tab
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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