Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


A Not-So-Quick Tour of the Web DataGrid Control : Page 3

The DataGrid control works as a multi-column, fully templated grid of data. It provides a built-in infrastructure for many common tasks including paging, sorting, and editing. To exploit the DataGrid to the fullest, you need to write a relevant quantity of code—mostly handlers for the various events fired during the control's life cycle. Don't be fooled by the fact that you normally write a lot of glue code with data grids. What you get in return for that effort really pays off.

Binding Data to the Grid
A DataGrid control is composed of a number of data-bindable columns. By default, the control includes all the data source columns in the view. You can change this behavior by setting the AutoGenerateColumns property to false. In this case, the grid displays only the columns explicitly listed in the Columns collection. The DataGrid control supports a variety of column types, which mostly differ from one another in how each represents the data. You must indicate the type of column if you add it to the Columns collection; otherwise, automatic generation will create only columns of the simplest type—the BoundColumn column type. Table 3 lists all of the column types available.

Table 3: Column types.

Column Type



Displays each cell as plain text. The contents of the column are bound to a field in a data source.


Displays a command button for each item in the column. The text of the button is data-bound. The command name of the button must be common to all the items in the column. You can control the graphical style of the button, push button or link button.


A particular type of button column associated with a command named Edit. When in edit mode, the DataGrid draws the whole row using text boxes rather than literals.


Displays the contents of each item in the column as a hyperlink. You can either bind the text of the hyperlink to a column in the data source or it can be static text. You can also make the target URL data-bound too. Clicking a hyperlink column causes the browser to jump to the specified URL. Supports target frames.


Displays each cell of the column following a specified ASP.NET template. This allows you to provide custom behaviors.

You normally bind columns using the <columns> tag in the body of the <asp:datagrid> server control, as the following code demonstrates.

<asp:datagrid runat="server" id="grid" ... > : <columns> <asp:boundcolumn runat="server" DataField="quantityperunit" HeaderText="Packaging" /> <asp:boundcolumn runat="server" DataField="unitprice" HeaderText="Price" DataFormatString="{0:c}"> <itemstyle width="80px" horizontalalign="right" /> </asp:boundcolumn> /columns> </asp:datagrid>

Alternatively, you can create a new column of the desired class, fill its member properly, and then add the class instance to the Columns collection. Here is the code to add a BoundColumn object to a grid.

BoundColumn bc = new BoundColumn(); bc.DataField = "firstname"; bc.HeaderText = "First Name"; grid.Columns.Add(bc);

The order of the columns in the collection determines the order of the columns in the DataGrid control. A BoundColumn object key properties include a DataField, which represents the name of the column to bind, and a DataFormatString, which allows you to format the displayed text. The previous code snippet adds two columns and specifies the header text and the source column for each. In addition, the second column is right aligned and given a format string to make it look like a currency value. The text of a bound column is always rendered using literal text.

The HyperLinkColumn class is a column type that contains a hyperlink for each cell. The programmer controls the text of the hyperlink (property DataTextField) and the URL (property DataNavigateUrlField). You can bind both fields to a column in the data source.

<asp:hyperlinkcolumn runat="server" DataTextField="productname" HeaderText="Product" DataNavigateUrlField="productid" DataNavigateUrlFormatString= "moreinfo.aspx id={0}" Target="ProductView"> <itemstyle width="200px" /> </asp:hyperlinkcolumn>

When you click the cell of a hyperlink column, the browser jumps to the specified URL and displays the linked contents in the window specified by the Target property. Feasible values for the Target property include a few special names like _self, _blank, _top, plus any name that individuates a frame window. If you have not set a target then the current page will refresh.

You can set most of the DataGrid features declaratively in the page layout.
In Figure 3, the yellow box to the right of the grid is an inline frame with a modified border. The frame refreshes whenever the user clicks a column hyperlink. You can use column names to format the URL. In the DataNavigateUrlFormatString property you define the URL with a one column placeholder identified by the {0} expression. The macro will expand at runtime using the value read from the column specified by the DataNavigateUrlField property.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date