As the title of the article suggests, it is about a very simple concept i.e. how do you include a DataGrid control on your web page. If you are already using a DataGrid control, then you already know all the stuff discussed here. We are not going to discuss any thing special in this article. This is more for a first time user. A lot of material discussed here can be found in .Net framework documentation. But for starting this article series, we needed a base. So we decided to start from here. A new user may find this article like a getting started type.

What is DataGrid?

As the name suggests, it is a grid that can be used to display information in some tabular form. Notice that we have used the term information and not data. When we use the term data, it gives an impression that some fields and tables will be shown from a database. This control is not just limited to displaying data from a database table. It can be used for displaying any information.

How do you include this control in a page?

If you are using Visual Studio .Net, then its just a matter of simply dragging the DataGrid control from the toolbox on to the page and the IDE will take care of adding the appropriate tags in your aspx file. And then you will be able to specify all the properties for the control in the Properties view. But in this article we will show how you can include this control on your page without using IDE and directly adding the appropriate tags on your page. This approach will also give you more understanding of the control. To include the control on your page, you just need to add the tag for this control on the page, specify its ID and the most important part, specify Runat attribute.

<form id="Form1" method="post" runat="server">
	<div align="center">
		<asp:DataGrid ID="DefaultGrid" Runat="server">
		</asp:DataGrid>
	</div>
</form>
											

How is information bound to DataGrid?

To display information in the grid, it needs a data source. This datasource is not just limited to ADO.Net components like DataReader, DataSet, etc. This source can be any object that implements IEnumerable interface. For this article we took the sample from the documentation and customized for our own purpose. A new DataTable object is created a couple of DataRow objects are added to it with 3 DataColumn objects. And thats it. We have the data source for our grid.

ICollection CreateDataSource() 
{
	DataTable dt = new DataTable();
	DataRow dr1;
	DataRow dr2;

	dt.Columns.Add(new DataColumn("Index", typeof(Int32)));
	dt.Columns.Add(new DataColumn("Title", typeof(string)));
	dt.Columns.Add(new DataColumn("Description", typeof(string)));

	dr1 = dt.NewRow();
	dr1[0] = 1;
	dr1[1] = "Simple";
	dr1[2] = "A simple use of DataGrid control";

	dr2 = dt.NewRow();
	dr2[0] = 1;
	dr2[1] = "Hyperlinks";
	dr2[2] = "Adding hyperlink columns to DataGrid control";

	dt.Rows.Add(dr1);
	dt.Rows.Add(dr2);

	DataView dv = new DataView(dt);
	return dv;
}

private void Page_Load(object sender, System.EventArgs e)
{
	if (!IsPostBack)
	{
		// Attach the data source to grid.
		DefaultGrid.DataSource = this.CreateDataSource();
		// Make the grid databoud.
		DefaultGrid.DataBind();
	}
}						
										

Any more steps?

These are the only steps we need for a very simple use of DataGrid web control on a page.