DataGrid Control for ASP.NET

Last month we took a look at how ASP.NET talks to databases using a combination of databound Web controls and ADO.NET. This time we will discuss one of the most powerful databound controls in detail–the

DataGrid.

The DataGrid is a Web control that encapsulates a lot of functionality that is common to most data driven pages. You can easily create a dynamic data driven page that does a lot of things that would have taken you tons of code if done in classic ASP. Of course, the easiest way to explain the power is through a series of examples. Veteran Web developers will recognize these examples as those that they constantly need to create for each Website.

Simple data-driven table



This example is the simplest of them all. In fact, in this one, I’m purposely adding a little code, rather than set everything through the DataGrid’s properties, so that you can have a slightly better understanding of how it works.

Let us first simple create a new ASP.NET page that displays information from a Access table. The code in file PCQ6-1.ASPX on the CD along with the file PRODUCTS.MDB allows you to see the DataGrid in action.

So now for an explanation of what goes on, check table 1 (in the ASP tables for CD) on CD.

These lines define the way that the DataGrid displays the data. The grid is given the name “MyDataGrid” and sets a few display parameters such as the cellpadding and cellspacing as well as whether the grid lines should be shown or not. 

The HeaderStyle element within the DataGrid defines the style of the table’s header — the one that shows the names of the fields being displayed. The ItemStyle on the other hand sets the style of the actual data being shown as well.

The actual code that gets the data is the one in table 2 on CD. This creates a new database connection as soon as the page is loaded and then if the page is not a result of a postback, it binds the DataGrid to the connection. In this, a new DataSet (introduced in the last article) is filled with the data in the tblProducts table in the Access database and the DataGrid’s datasource property is set to this DataSet and bound. This automatically displays the data without requiring writing loops and recordset

handling.

As you can see, the amount of code in this is comparable to one that you could have written in ASP. But let us now look at a slightly more complex example.

Alternate item styles



In this example, we shall create a data list similar to the one above, but will have each alternating item in the list in a different color. You will have seen such effects on many commercial sites that display a list of products for you to choose from. Don’t mind the garish colors in the sample — they’re for demonstration only.

Although the file PCQ6-2.ASPX on the CD gives you the full code, the only change between this and the previous one is the DataGrid definition itself as shown in table 3 on CD.

All the rest being the same, only the addition of a new AlternatingItemStyle element makes it different. This element defines the style of each alternate element and changes it accordingly.

Here is where you start seeing the benefit of using a DataGrid. Doing this in classic ASP would require you to keep an alternating counter and checking the value each time before you draw the table out. With ASP.NET and the DataGrid this becomes a very simple task.

Paging records



Another major task in ASP is creating lists that span “pages”. That is, a user should be able to view only a few records on one page and to see the rest he has to navigate to them. In ASP, this requires a ton of coding and error checking.

In ASP.NET and DataGrid, all it takes is setting a few properties. Take a look at the following DataGrid definition on table 4 on CD.

There are basically 4 properties changed here. AllowPaging=True simply turns on the paging abilities for the DataGrid. PageSize sets the number of rows to show, in this case 5. The EnableViewState is tuned on so that the DataGrid “remembers” which page you are on currently. And the OnPageIndexChanged is the event that is fired when you click on any of the paging navigation controls — in this case a < and > sign to move to the previous and next page respectively.

The code that does the paging is simple as well (see table 4a). 

This simply sets the current page index of the DataGrid to the page index that is passed by the page navigation control. It then applies the data binding again. As simple as that!

So you may not be happy with the < and > signs. You can change the style of the navigation bar and controls (collectively called the pager) using the PagerStyle element within the

DataGrid.

Modify the DataGrid to use the code in table 5 on CD.

The PagerStyle element defines the pager to have a right aligned, bold, yellow font, on a blue background and change the style from the next-previous style to page numbers and to have a maximum of 5 page number buttons in the pager.

You can check out what this looks like in the PCQ6-4.ASPX file on the CD. The pager is automatically created with page number buttons, and if the number of pages exceeds what you have entered, it also automatically adds the controls for navigating to the next set of page numbers. All without making any changes or additions to the code at all! By now you would have a fair idea of the power of the DataGrid. So let’s get moving.

Sorting data



Sorting data especially in paged records could be a real chore in ASP. However, ASP.Net allows you to do this too very easily. Again, simply modify the DataGrid element as in table 6 on CD.

The AllowSorting attribute turns the sorting ability of the DataGrid on. In this, all header elements become hyperlinks that raise the OnSortCommand event when clicked. You can therefore trap this event and assign it to your own sort function. 

The sort function in this case, MyDataGrid_Sort, looks like table 7 on CD. 

This simply gets the value of the sort expression clicked on and sends it to the BindDataGrid function. This function needs to be modified only slightly from the one in the first example. See table 8 on CD.

This has only two small changes made — one, an optional parameter that defines the sort order (and defaults to the field iProdID if none was given) is added and a new line that sorts the DataView by the given sort order is placed just before the DataGrid is bound to the data. The file PCQ6-5.aspx on the CD allows you to view how this page works.

Selecting and editing records



And as a final example to showcase the power of the DataGrid, we shall allow selecting and editing data in place for any record in the DataGrid. This uses one of the most powerful features of the DataGrid — templates.

Templates typically allow you to use outlines or guides for different uses of the DataGrid. Till now you’ve seen templates for static elements such as the header, pager, item and alternating item styles. However now, you will see a set of much more dynamic templates that can not only customize the way the data is shown, but also allow you to perform a lot of different actions on them. 

Change the DataGrid to look like table 9 on CD. The attributes that are repeated in all examples have

beesn removed for brevity.

There are a few new attributes in the DataGrid. The DataKeyField specifies which is the field in the grid that is like a primary key and can uniquely identify any row. 

The OnEditcomand, OnUpdateCommand and onCancelCommand attributes assign event handlers to these events (we shall come them very shortly). And finally the AutoGenerateColumns is turned off so that we can supply the way the data is to be shown ourselves.

Within the DataGrid, now a new element called Columns is created. Within this, templates for each column to be shown is specified. The first is a simple bound column that simply shows the product id. Note that the text for the header can also be specified here. 

The next one specifies the template for the product name field, and sets the header accordingly. Also specified is the sort field to use when this is clicked. Within this, the normal Item style is to use a Label element to display the data. 

The <%# %> syntax allows for data binding the control. Another template — the EditItemTemplate is used when the item is in “edit” mode. This uses a textbox with the value pre-filled as part of the style. The last field also has a similar template.

The final column is not one from the database. Instead it is an edit command button that takes the form of a link and has different text values defined for the different modes it can work in. 

The file PCQ6-6.aspx on the CD has the complete code for viewing, and editing the data in the DataGrid itself. Since this is more of an example of the DataGrid, the result of trying to update a record is only a display of the SQL statement that would get executed. It is left as an exercise to you to do the actual update into the database.

Hopefully, this long article would have shown you how powerful the DataGrid control is and the various possiblities available. You can try out the many different options it has and be able to get various types of output–all without investing too much time in the code. 

Vinod Unny is a Technology Consultant at Enterprise InfoTech