16.9 Using the DataGrid Control

16.9 Using the DataGrid Control

You want to use a data-bound list that renders items in a pageable grid.

Technique

The DataGrid control displays data in a similar fashion to a spreadsheet. Rows within a data table appear as individual rows in the DataGrid using a template-based rendering method similar to the DataList discussed in the previous recipe. However, the DataGrid control adds pagination, sorting, and more advanced rendering techniques using a columnar layout.

Creating the initial DataGrid is similar to using the methods to initially databind a control. After you create the data connection, adapter, and dataset, select the DataSet object as the DataSource of the control; select the table within the DataSet , which for the example in this recipe is the Products table in the Northwind database; and finally, set the DataKeyField equal to the column used to uniquely identify each item within the data table. For the Products table, this column is the ProductID . Finally, within the Page_Load event handler, fill the dataset using the data adapter and call the DataBind method.

When you view the Web page, you'll see that by default every column within the data table is rendered as a column within the DataGrid . Unlike the DataList control, the DataGrid automatically generates the proper ASP.NET controls for each value within a column without even needing to edit the templates. Of course, you'll also notice that from a visual standpoint, the default style of the DataGrid is less than stunning. The next recipe looks into the different ways you can improve the visual appeal of a DataGrid by changing style information.

By default, the DataGrid renders every column within a database table. Sometimes, however, you will want to display only a few columns . Set the AutoGenerateColumns property to false . At this point, the DataGrid does not render any columns and you see a blank page when you run it. To add the columns within a database table to the DataGrid , right-click on the DataGrid and select Property Builder. Next, select the Columns tab and move the columns you want rendered from the Available Columns list to the Selected Columns list. Within the properties for each column, you can also change the text for the header. The header appears at the top of each column, specifying what each value within the column represents.

At this point, the DataGrid displays only the columns that you selected. However, the default control to use for each column is the Literal control, which displays the values using a label. For most items, this control is satisfactory, but other values don't fit well. For instance, the Discontinued column within the Products table is a Boolean value. If it were an editable DataGrid , then a user would have to type either true or false , which just leads to the possibility of error. You can make the column a template-based column and specify the exact control to use, which in this case should be a CheckBox . To make a template-based column, open the Property Builder form and select the corresponding column from the list of selected columns. Within the properties recipe for the column, click on the link to make the column template-based. Next, right-click on the DataGrid control and select the template to edit from the Edit Template menu. The designer opens the available templates for the item. Editing each template for an item is the same as it was for the DataList . Drag and drop controls from the ToolBox onto a template and bind the appropriate data column using the DataBindings form. For the Discontinued column, place a CheckBox control in the ItemTemplate and EditItemTemplate templates. Because you use the ItemTemplate only when viewing and not editing data, set the Enabled property of the CheckBox control to false . When you view the DataGrid , you now see check boxes for the Discontinued column.

Comments

The DataGrid is the most advanced ASP.NET control within the .NET Framework. A major difference between the DataList and DataGrid control is the actual rendering of the data. If you recall from the last recipe, templates controlled the rendering of each item within a DataList . The layout of each item was your responsibility because no default is provided. A DataGrid , on the other hand, although still using template-based rendering, begins with a set of default templates, making the initial control creation more versatile. Furthermore, a DataGrid works with data on a columnar level, whereas a DataList uses a template for each item. Using columns, you can focus on a single column for a data item rather than the entire data item itself.

A DataGrid supports the ability to render the data using a series of linked pages, called pagination . To enable pagination, you have to go through a few steps because simply changing a property is not enough. To start, change the AllowPaging property to true . Next, set the number of rows per page you want displayed by changing the PageSize property. When the DataGrid is rendered, you see a series of links at the bottom of the grid denoting each page. You can change the default rendering of the pages by accessing the Pages tab within the Property Builder. When you click on a page number at this point, the DataGrid does not go to the next page. Create an event handler for the PageIndexChanged event, and within that handler, set the CurrentPageIndex property of the DataGrid control, as shown in the following code:

 private void DataGrid1_PageIndexChanged(object source,     DataGridPageChangedEventArgs e) {     DataGrid1.CurrentPageIndex = e.NewPageIndex;     // rebind data     sqlDataAdapter1.Fill( productsDS1 );     DataBind(); } 

This recipe looked at the DataGrid control as a way to display columns of data from a database table. You also saw how to change the default columns that are displayed to choose which columns to display and which ones to hide. Furthermore, you saw how to edit an individual columns template to use a different control instead of the default label control. The next two recipes continue with this discussion by examining how to change the style of the DataGrid for a better visual appearance and how to make items within the DataGrid editable.