Publish Article
Go Freelance

Use AutoGenerateColumns Attribute To Control DataGrid Column Rendering

DataGrid Column Rendering

In previous articles we have limited the discussion to very elementary use of DataGrid control. This was just to get started and have some kind of foundation to build on. Now we will start delving into some intermediate level of use. In this artcile we will focus on one question.

Can I select the columns, from the datasource, which should be renderd?

The datasource for your data grid may have quite a few data columns. But you may not want to display the information from all of them. And in some cases, you may want to combine the information from multiple fields to display in one data column of the grid. And extend our example we have added one more field to the dataset. This field contains the URLs for the artcile titles in the dataset. Now when we want to display the list of articles, there is no point displaying the long URLs to the client. It would be nice if we could present the data in such a form that the client only sees the titles and click on them to access the URLs. That means we need a way so that Hyperlink data field from the datasource gets combined with Title field in one DataColumn.

DataGrid control exposes AutoGenerateColumns attribute. By default this attribute value is set to true. What this means is that when DataGrid gets databound to the source, it will render all the data fields that it can. Notice that we have used the term render fields that it can. This is how it works.

When you bind a data source to DataGrid control, it generates BoundColumn objects for each data column. As the name implies, a BoundColumn is a column in the grid and is bound to a data field in the datasource. It is used to render information in text format. That means if a field contains data that is not of Primitive types, String, DataTime and Decimal type, it will exclude those columns from rendering. This does not mean that you can't have any other data types in the source. But to render those data types, you will need to use TemplateColumn. We will discuss that in our next article.

There are 5 types of colums that you can add to DataGrid control.

  • EditCommandColumn
  • HyperLinkColumn
  • BoundColumn
  • ButtonColumn
  • TemplateColumn

The names of the columns are very descriptive. If you want to render a field in a form that does not fit in first four types, then you can use TemplateColumn for that.

Back to our orginal question. How do we control what columns to display? Here are the steps that you need to follow to accomlish this. First we will show this can be done using asp design time tags. And then we will show how to do it programtically.

  • Set AutoGenerateColumns attribute to false.
  • Add Column tag to asp:DataGrid tag.
  • Now add your BoundColumn tags for the data fields that you want to render. For example in pur example, we want to render Index, Title and Description fields. Two fields Title and Description canbe simply displayed by adding BoundColumn tags. But we want to combine Title field with Hyperlink field to render the information as a HTML tag so that user can click on the links to goto that article URL. So we added HyperLinkColumn column tag to Control collection.
    <asp:DataGrid ID="DefaultGrid" Runat="server" AutoGenerateColumns=False>
    		<asp:BoundColumn DataField="Index" ReadOnly=True HeaderText="#">
    		<asp:HyperLinkColumn DataNavigateUrlField="Hyperlink"
    			 DataTextField="Title" HeaderText="Title">
    		<asp:BoundColumn DataField="Description"
    			ReadOnly=True HeaderText="Description">
    For more information on all the properties that you can set for these bound columns, please refer to .Net framework documentation.

Now we will show how this can be accomplished programtically in code behind file. Now you don't have to supply any Columns or BoundColumn tags in aspx file. All the steps described earlier will be done prgramtically now. We have created InitializeBoundColumns method in our class that adds the columns to Columns collection of DataControl control.

private void InitializeBoundColumns()
	DefaultGrid.AutoGenerateColumns = false;
	BoundColumn indexCol = new BoundColumn();
	indexCol.DataField = "Index";
	indexCol.HeaderText = "#";

	BoundColumn descCol = new BoundColumn();
	descCol.DataField = "Description";
	descCol.HeaderText = "Description";

	HyperLinkColumn urlCol = new HyperLinkColumn();
	urlCol.DataTextField = "Title";
	urlCol.DataNavigateUrlField = "Hyperlink";
	urlCol.HeaderText = "Title";

	// Add three columns to collection.

Some important observations

  • AutoGenerateColumns value should be set before you bind datasource to DataGrid control. If you are using design time method of specifying columns, then this is not a problem because you will specifyin this value in asp:DataGrid tag itself. But if you are doing it programatically, set this attribue value before you call DataBind method on DataGrid control object.
    DefaultGrid.AutoGenerateColumns = false;
  • If you don't set AutoGenerateColumns attribute before control getting data bound, you will end up with a data grid with all the data colums in data source plus the columns you specified in Columns collection.
  • Order in which BoundColumn controls are added is important. They get rendered in the order in which they were added. So if you want a data column to be rendered before another field, then make sure that it is added to Columns collection in that order.
  • Columns collection will be empty if AutoGenerateColumns attribute is set to true and you don't add any columns explicitly. What this means is that if you don't add any bound columns to Columns collection of the control, it will be empty. The control does not populate this controls collection if all the data columns are generated automatically. Therefore if you are planning to control the order and rendering of colums programtically, then make sure that you have set AutoGenerateColumns value to false and added the required data colums to Controls collection.
  • If you use combination of explicitly added columns and automatically generated columns, then explicitly declared columns are rendered first. This means that you have set AutoGenerateColumns to true and also added Columns tag to add columns explicitly. You may use this kind of combination when you want to combine couple of data fields to generate one field. We will discuss it next article when we describe use of TemplateColumn.
  • If you explicitly add columns then set value of HeaderText property to display header for that data column. When columns are automatically generated and ShowHeader property is set to true, then data column's name is used as header text. But for explicitly added, you will have to supply the header text.
  • Rendering properties specified for explicitly added columns, only affects the column and not the contained HTML tag. What this means is that if you set the value of any property like CssClass for a bound column like HyperLinkColumn, it is applied to <td> cell that contains <A> tag. So if you have any HTML tag contained in that table cell that cannot inherit style from the container, then you may have to use TemplateColumn to control its rendering.
Go Freelance
Home     About us     Contact us    Copyright    Privacy Policy    Return Policy    Advertisers
Copyright © Netomatix