Basics of using DataGrid

Basics of Using DataGrid
This tutorial introduces you to the DataGrid control. It tells you about the BoundColumn and shows an example of how to use it.

The DataGrid control, similar to the DataList control but with more features, bounds data and displays it in a grid.

We shall begin with just displaying the records from the database MyDB (which we used in several tutorials, here at Geekpedia and which was created in the tutorial named ‘Connecting to a SQL database from ASP .NET I’).

Anyway, for setting up fast a connection to the SQL database from the ASP .NET Web Application use the following code inside WebForm1.aspx.cs:

Inside the public class named WebForm1:

// Here's what we need to establish the connection

protected System.Data.SqlClient.SqlConnection sqlConnection1;

protected System.Data.SqlClient.SqlCommand sqlSelectCommand1;

protected System.Data.SqlClient.SqlDataReader sqlDataReader1;

Inside InitializeComponent() – after you expand the region:

this.sqlSelectCommand1 = new System.Data.SqlClient.SqlCommand();

this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();

this.sqlSelectCommand1.CommandText = "SELECT * FROM dbo.MyLinks";

this.sqlSelectCommand1.Connection = this.sqlConnection1;

this.sqlConnection1.ConnectionString = "workstation id=WORKSTATION;packet size=4096;user id=aspnet;data source=WORKSTATION;persist security info=True;initial catalog=MyDB;password=secret";

// This line was already there

this.Load += new System.EventHandler(this.Page_Load);

On the web form (design mode of WebForm1.aspx) drag a DataGrid control:

Now go to the C# code file (WebForm1.aspx.cs) and inside Page_Load() use the following code:

private void Page_Load(object sender, System.EventArgs e)

{

// Open the connection to the database

sqlConnection1.Open();

// Set the DataSource to the result of the Select command

DataGrid1.DataSource = sqlSelectCommand1.ExecuteReader();

// Bind the DataGrid

DataGrid1.DataBind();

// Close the connection to the database

sqlConnection1.Close();

}

Here we simply bind the control to the database, and if you compile now you’ll see the result in the browser:

The bind was successful. The title of the columns in the DataGrid is the actual name of the columns inside the database (Title and URL).

Yet we didn’t used any of the features of the DataGrid, and that’s what we’re going to do next.

DataGrid columns
The BoundColumn

BoundColumn is the column that displays the records inside a DataGrid. This is the default column type. You don’t have to specify any BoundColumns to display the columns inside the database as they are generated automatically. But if you do specify the columns, you need to set an attribute for the <asp:DataGrid> tag that sets the auto generation of columns to false.

Let’s do this – go into the HTML code of WebForm1.aspx and inside the form tag of Form1 use the following code:

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" AutoGenerateColumns="False">

<Columns>

<asp:BoundColumn DataField="Title" HeaderText="Title" />

<asp:BoundColumn DataField="URL" HeaderText="Link" />

</Columns>

</asp:DataGrid>

First you can notice the attribute called AutoGenerateColumns which is set to False, that’s because we want to create our own columns.

Then, inside the <Columns> tag we create two BoundColumns and we specify to each of them, the DataField (which is actually the column name from the database) and HeaderText – the text which appears above the column.

Here’s the result in the browser:

Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top