A Not-So-Quick Tour of the Web DataGrid Control

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.

by Dino Esposito

May 9, 2003

Page 1 of 5

ata-bound controls play a key role in the development of ASP.NET applications. Data-driven controls allow you to associate their whole interface, or individual properties, with one or more columns of a .NET-compliant data source. In this article, I'll delve into the depths of an extremely versatile data-bound control that is a fixed presence in any real-world ASP.NET applicationthe DataGrid control. I'll focus on the key programming aspects of the control, including data binding, column mapping, paging, and sorting.

The DataGrid server control renders a multi-column, fully templated, data-bound grid and provides a highly customizable, Excel-like user interface. Bound to a DataGrid, the data source renders through an HTML table interspersed with HTML elements and hyperlinks. You can customize the contents of the cells in each column to some extent using system-provided, as well as, user-defined templates. The DataGrid supports various types of data-bound columns, including text, templated, and command columns. The data binding mechanism is nearly identical to that of other ASP.NET controls. You bind the data source using the DataSourceproperty, but no data will actually load until you call the DataBindmethod.

You can set most of the DataGrid features declaratively in the page layout; the same set of attributes, though, are also available programmatically through the properties and methods of the DataGrid class.

Simple Data Binding
The following line of code is enough to enable grid functionality in a Web page. It declares a server-side instance of the DataGrid control and assigns it the name of grid. All of the code associated with the page, refers to the DataGrid using the specified ID. The ASP.NET runtime takes care of creating and initializing such an instance for each request.

<asp:DataGrid runat="server" id="grid" />

Once you've placed the control onto the page, you bind it to the data source and display the resulting HTML code. The following code binds a DataTable to the grid.

Although effective in terms of retrieval and display, you probably would not use this code in real applications because as Figure 1shows, the resulting DataGrid control doesn't implement necessary features and the interface is too plain.