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 2

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.




Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js

The Programming Interface
The DataGrid control has no method specific of the class. It inherits all the methods it provides (for example, DataBind) from the various base classes. The DataGrid inherits from the BaseDataList class and implements the INamingContainer interface. The BaseDataList abstract class inherits from WebControl and provides a common set of functionality for all data listing controls, including the DataList and the DataGrid. The INamingContainer interface is a marker interface that doesn't require the implementation of any methods but only indicates that the class has some features. In particular, the interface marks the class as a naming container. A naming container is a class that provides an ID namespace for their child controls. Controls that act as naming containers guarantee that the ID attributes of their child controls are unique within the entire application—a key point for all controls that contain a subtree of controls.

Table 1 details the list of properties supported by the DataGrid control, but doesn't include the properties inherited by the BaseDataList and WebControl classes.

Table 1: Properties of the DataGrid class.




Indicates whether you've enabled custom paging. You must set AllowPaging to true for this setting to work.


Indicates whether you've enabled paging.


Indicates whether you've enabled sorting.


Returns the style properties for alternating rows.


Indicates whether you want to permit the creation and display of column objects for each field in the data source. True by default.


Indicates the URL of the image to display as the background of the control.


Indicates the space (in pixels) left between the cell's border and the embedded text.


Indicates the space (in pixels) left between two consecutive cells both horizontally and vertically.


Returns a collection of DataGridColumn objects that represent the columns in the DataGrid control.


Returns the collection of all the child controls in the grid.


Indicates the index of the currently displayed page.


Indicates the key field in the bound data source.


Returns a collection that stores the key values of all the records displayed as a row in the grid. You use the DataKeyField property to define the column that you want to use as the key.


A string that indicates the specific table in a multimember data source to bind to the grid. The property works in conjunction with DataSource. If DataSource is a DataSet object, then DataMember contains the name of the particular table to bind.


Indicates the data source object that contains the values to populate the control.


Indicates the index of the grid's item to edit.


Returns the style properties for the item being edited.


Returns the style properties for the footer section of the grid.


Indicates whether all cells must have the border drawn.


Returns the style properties for the heading section of the grid.


Indicates the horizontal alignment of the text in the grid.


Returns the collection of the currently displayed items.


Returns the style properties for the items in the grid.


Gets the number of pages required to display all bound items.


Returns the style properties for the paging section of the grid.


Indicates the number of items to display on a single page.


Indicates the index of the currently selected item.


Gets a DataGridItem object that represents the selected item.


Returns the style properties for the currently selected item.


Indicates whether or not to display the footer. False by default.


Indicates whether or not to display the header.


Indicates the virtual number of items in the DataGrid control when you choose to use custom paging.

Many of the properties allow you to improve the grid's look and feel. When setting attributes, you can either set the property individually at the <asp:datagrid> level, or group related properties together on a per-item basis. For example, if you want to set the background color of the column headers to a particular color, you can do that through the headerstyle-backcolor attribute at the root level, as shown in the following code.

<asp:DataGrid runat="server" id="grid" headerstyle-backcolor="brown">

However, you can also define the e child node within the <asp:DataGrid> declaration and set its BackColor attribute.

<asp:DataGrid runat="server" id="grid" ...> <HeaderStyle BackColor="brown"> : </asp:DataGrid>

The effect is the same, but the second option looks more elegant and is easier to maintain. Visual Studio .NET generates this type of code when you drop a DataGrid control on a Web form. The following schema illustrates the overall ASP.NET layout of the control.

<asp:DataGrid runat="server" ... > <AlternatingItemStyle ... /> <EditItemStyle ... /> <FooterStyle ... /> <HeaderStyle ... /> <ItemStyle ... /> <PagerStyle ... /> <SelectedItemStyle ... /> <Columns> : </Columns> </asp:DataGrid>

The output of a DataGrid control consists of several constituent elements grouped in the ListItemType enumeration. (See Table 2 for more information.) Each element plays a clear role and has a precise location in the control's user interface as Figure 2 shows.

Table 2: The ListItemType enumeration.

Item type



Represents a data-bound row placed in an odd position. Useful if you want to use different styles for alternating rows. AlternatingItemStyle is the property that lets you control the look and feel of the element.


Represents the item, or alternating item, currently displayed in edit mode. EditItemStyle lets you control the look and feel of the element.


Represents the grid's footer. You cannot bind the element to a data source and you set its style using the settings in the FooterStyle property.


Represents the grid's header. You cannot bind the element to a data source and you set its style using the settings in the HeaderStyle property.


Represents a data-bound row placed in an even position. Styled through the ItemStyle property.


Represents the pager element that you use to scroll back and forth between pages. You cannot bind the element to a data source and you set its style using the settings in the PagerStyle property. You can place the pager at the top or the bottom of the grid's table and even in both places.


Represents the item, or alternating item, currently selected. The SelectedItemStyle property defines the look and feel of the element.

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