Create Gridview at runtime

In Asp.Net one of the most frequently used Web Control is the GridView control. In the previous examples we access data from database using SqlDataSource. So no need of Code behind use to retrieve the data. Also we fixes database , sql and everything before we run the program.

Gridview from SqlDataSource gridview at runtime

Drag-and-drop functionality

In this article, we will investigate into the implementation of the GridView control for data display purposes. To showcase data in real-time, the initial step involves seamlessly incorporating the GridView onto your ASP.NET page. This can be easily achieved by utilizing the drag-and-drop functionality provided by the ASP.NET development environment. By selecting and placing the DataGrid control onto the desired location within your page, you can establish the foundation for presenting data in a structured and visually appealing manner.

However, it is crucial to note that the configuration and customization of the GridView extend beyond the visual design aspect. To ensure the desired functionality and appearance, various settings and properties of the GridView control need to be appropriately defined in the code-behind file. This entails programming the necessary logic and data source connections to populate the GridView dynamically. After drag and drop the gridview, your design page look like the following image :

gridview design

After drag and drop the gridview on the form, we go to the code behind section and write the code for accessing data from database and display on Gridview.

Database

In this article we are using Microsoft's Pubs database for retrieving data. You can download Pubs database from the following link:

Download

In this program we are displaying the data from Stores table in the Pubs database. So first create a connection string and then create the sql statement for retrieving the data.

string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=****"; string sql = "select * from stores";

After retrieving the data in Dataset, you should set the data source for gridview as Dataset.

GridView1.DataSource = ds.Tables[0]; GridView1.DataBind();

From the following source code, you can create a gridview and fill the data at runtime.

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </div> </form> </body> </html>

C# Source Code

using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlDataAdapter adapter = new SqlDataAdapter(); DataSet ds = new DataSet(); int i = 0; string sql = null; string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=*****"; sql = "select * from stores"; SqlConnection connection = new SqlConnection(connetionString); connection.Open(); SqlCommand command = new SqlCommand(sql, connection); adapter.SelectCommand = command; adapter.Fill(ds); adapter.Dispose(); command.Dispose(); connection.Close(); GridView1.DataSource = ds.Tables[0]; GridView1.DataBind(); } }

VB.Net Source Code

Imports System.Data.SqlClient Imports System.Data Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim adapter As New SqlDataAdapter() Dim ds As New DataSet() Dim i As Integer = 0 Dim sql As String = Nothing Dim connetionString As String = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=*****" sql = "select * from stores" Dim connection As New SqlConnection(connetionString) connection.Open() Dim command As New SqlCommand(sql, connection) adapter.SelectCommand = command adapter.Fill(ds) adapter.Dispose() command.Dispose() connection.Close() GridView1.DataSource = ds.Tables(0) GridView1.DataBind() End Sub End Class