[The BLINK tag in HTML] was a joke, okay? If we thought it would actually be used, we wouldn't have written it! --Mark Andreessen
Welcome to my blog and project site for Microsoft.NET development.

I've been a full time .NET developer for ten years, but I didn't start my professional life as a programmer ... more
Share/Print this page:

Adding Columns to DataGrid Programmatically

BoundColumn and HyperLinkColumn

By steve on January 01, 2007.
Updated on January 22, 2012.
Viewed 81,338 times (0 times today).
Article TypesLanguagesMicrosoft StackSoftware DevelopmentTechnologiesTechnologies
SnippetC#SQL ServerData.NET ControlsASP.NET

Summary

Contents

Controlling the data you add to datagrids can be one of the most cumbersome and annoying things you'll do in ASP.NET, but here I present how simple it can be to add basic text or link columns. This is a great starting point if you are new to DataGrids. With a little work, you'll find the datagrid is an extremely powerful tool.

Keep your eye out for .NET 2.0 where this is all simplified dramatically.

For the following example, drag a DataGrid control onto your ASP.NET page named DataGrid1. Then call the following method from the Page_Load event handler.

Snippet 1: Adding BoundColumn and HyperLinkColumn to DataGrid

Contents
public void TestHyperLinkColumn()
{
	// First add a simple bound column
	BoundColumn nameColumn = new BoundColumn();
	nameColumn.DataField = "ProductName";
	nameColumn.DataFormatString = "{0}";
	nameColumn.HeaderText = "Product";

	// Now add the HyperLink column
	HyperLinkColumn linkColumn = new HyperLinkColumn();
	linkColumn.DataTextField = "ProductName";
	linkColumn.DataTextFormatString = "{0} Details";
	linkColumn.DataNavigateUrlField = "ProductID";
	linkColumn.DataNavigateUrlFormatString = "/MyApp/ProductDetails.aspx={0}";
	linkColumn.HeaderText = "Details";

	// Add the link in a BoundColumn
	// where the text can be the same for all rows
	BoundColumn blinkColumn = new BoundColumn();
	blinkColumn.DataField = "ProductID";
	blinkColumn.DataFormatString = "<a href='/MyApp/ProductDetails.aspx={0}'>Details</a>";
	blinkColumn.HeaderText = "Details";

	DataGrid1.Columns.Add(nameColumn);
	DataGrid1.Columns.Add(linkColumn);
	DataGrid1.Columns.Add(blinkColumn);
	DataGrid1.AutoGenerateColumns = false;

	DataTable dt = GetNorthwindProductTable();
	DataGrid1.DataSource = dt;
	DataGrid1.DataBind();

}

Note that I added three columns. The first was a simple text column (BoundColumn) with the product name. For the second column I added a link to a product details page using the HyperLinkColumn. For the third column I showed an alternate way of adding a link column if the link text can be the same for all rows, such as "Details". Just added the HTML link tag as text to the BoundColumn. It will be rendered as an HTML link when you view the page.

Back to Top

User Comments (5)

Posted 2007 Jul 04 05:53 AM. reply
Hi,

I want add columns to the datagrid one is boundcolumn and hyperlink , i have added these two columns but when ever i am filling rows, the data is not storing in the mentioned columns, its storing only @ auto generated columns, please send reply as soon as possible.

Srinivas Reddy
Reply 2007 Sep 15 22:21 PM by steve. reply
Hi Srinivas,

I'm thinking that you haven't set the AutoGenerateColumns property to false.

DataGrid1.AutoGenerateColumns = false;

Cheers,
Steve
Posted 2008 Jun 25 13:17 PM. reply
Hi,

Can you please add a snapshot how it would look with the field details in it? It would be helpful in understanding the concept.

Thanks,
Shal

Shal
Posted 2010 May 12 08:31 AM. reply
Muchas Gracias Amigo me has salvado de una...

Marco A. Herrera G.
Posted 2012 Jan 12 06:42 AM. reply
I have a datagrid with 4 column as below: A B C D I want to when application is loaded, my datagrid will added a new column F into front column B asw below: A F B C D can you help me? thanks.

priya
Post Your Comment
  You may post without logging in or login here.
Display Name: Required.
Email: Required. Will not be shown. Used for identicon.
Comment:
Allowed tags: <quote></quote>, <code></code>, <b></b>, <i></i>, <u></u>, <red></red>
 
   Please type text as shown in the image at left.