Top 10 DataGrid Tips

3. Attach Code to HyperLink Columns

Using a command column, you can simulate a hyperlink column. It suffices that in the ItemCommand handler you eventually use redirects to a given URL. The Response.Redirect method does the job for you.

In Whidbey, a similar trick is employed to implement site counter functionality. Some server controls, such as HyperLink, Button, and LinkButton, come with built-in support for counters. When configured to support the site counter service, a Hyperlink control doesn't directly point to the specified URL. Instead, it points to a system URL - an HTTP handler named counters.axd - that registers the event and then redirects to the original URL. The handler receives information about counters and URLs in an encoded form for security reasons.

4. Change Styles in Edit Mode

The DataGrid supports in-place editing; this means that users can edit the content of the cells in a given row and have the new values stored back to the data source. In ASP.NET 1.x this process is not entirely automatic (developers must write the update code), but this doesn't change the essence of the function greatly. Only one row at a time is in edit mode, meaning that it is rendered using an edit template as opposed to the default item template. Templated columns have total control over the cell layout in both view and edit mode. Bound columns render their cells using label controls in view mode and textboxes in edit mode. Other column types just don't support the edit mode. The edit mode is activated setting the EditItemIndex property to a value greater than -1.

Fonts, colors, borders, and the size of the textboxes may not be appropriate and consistent with the look-and-feel of the site. Templates give you full control over what's displayed in edit mode, but there's a lot you can do to make a grid look better - even with bound columns.

When the grid is about to render any row, it fires the ItemCreated event. The event contains information about the type of item being created. If the grid item corresponds to the edit item, you retrieve all the textboxes in the row and dynamically change their styles (see Figure 2).

Sub ItemCreated(sender As Object, e

 As DataGridItemEventArgs)

  Dim itemType As ListItemType = e.Item.ItemType

  Select Case itemType

    Case ListItemType.Header

      SetupHeader(e)

    Case ListItemType.Footer

      SetupFooter(e)

    Case ListItemType.EditItem

      SetupEditItem(e)

  End Select

End Sub

 

Sub SetupEditItem(e As DataGridItemEventArgs)

  Dim cell As TableCell

  For Each cell In e.Item.Cells

      If cell.Controls.Count >0 Then

         Dim ctl As Control = cell.Controls(0)

         If TypeOf(ctl) Is TextBox Then

              Dim t As TextBox = CType(ctl, TextBox)

     t.BackColor = Color.Yellow

            t.BorderStyle = BorderStyle.Outset

            t.BorderColor = Color.BlueViolet

            t.BorderWidth = Unit.Point(1)

            t.Width = Unit.Percentage(100)

            t.Font.Name = "verdana"

            t.Font.Size = FontUnit.Point(8)

       End If

   End If

  Next

End Sub

Figure 2. Change the style of the controls in the DataGrid item being edited.

The ItemType property of the DataGridItem object being processed indicates the type of the item. If it is EditItem, then you loop through all the cells in the item and grab a reference to the first control in the cell:

Dim cell As TableCell

For Each cell As TableCell In e.Item.Cells

    Dim ctl As Control = cell.Controls(0)

    If TypeOf(ctl) Is TextBox Then

       Dim t As TextBox = CType(ctl, TextBox)

       :

    End If

Next

By design, the DataGridItem object inherits TableCell. Furthermore, the default edit template is made of a single TextBox control. For this reason, the code I've just shown you can only retrieve the cell's textbox object. Figure 3 compares the default user interface to the modified user interface.

Figure 3. The grid on the left shows the default user interface for editable items; the grid on the right implements style changes discussed in this article.

5. Modify the Header Dynamically

In most situations, the header text you statically set in the DataGrid's section remains valid for the entire lifetime of the session. However, suppose you're using the DataGrid to render a timesheet and have a column for each day of the week. Also suppose that instead of a generic caption such as Monday or Tuesday, you want date-specific text representing the actual date. It's rather unlikely that your database contains columns named after a date, so you typically need to bind the column to a fixed database column and then adjust the header text dynamically. Once again, the ItemCreated event handler does the trick.

You write a piece of code that gets involved if the type of the item being created is Header, as in Figure 2:

Sub SetupHeader(e As DataGridItemEventArgs)

    e.Item.Cells(0).Text = "..."

    e.Item.Cells(1).Text = "..."

End Sub

It is important to note that you must work directly on the cells. At the time the ItemCreated event fires, the DataGrid column objects have been processed, so any changes to the HeaderText property of any column object are ignored. Within the same handler, you can also retrieve the cell of a particular column and add extra controls. For example, you can add a little bitmap to denote that the displayed data is sorted by the content of that column. Here's how to modify the layout of the header row, grouping more columns under the same header (you can view the results; see Figure 4):

Sub SetupHeader(e As DataGridItemEventArgs)

  e.Item.Cells.RemoveAt(0)

  e.Item.Cells(0).HorizontalAlign = HorizontalAlign.Center

  e.Item.Cells(0).ColumnSpan = 2

  e.Item.Cells(0).Text = "Employees"

End Sub

Figure 4. The header and footer in the DataGrid are dynamically modified during the ItemCreated event.

6. Compute Footer Expressions

Each DataGrid column has a FooterText property that matches the aforementioned HeaderText property. Unlike HeaderText, though, FooterText means little if it's set to a fixed and static text. The real added value of a footer text is its capability to express a summary of the column's contents. The DataGrid control provides no facilities to compute aggregate functions such as Sum, Count, or Average. However, as long as you can figure out the correct value to display, the ItemCreated event handler gives you a chance to place the right value in the right place.

When the grid is about to render its final row, the type of the item being created is Footer. At this point, you retrieve the right-column footer and display any static or dynamically computed text. The value to display depends on the expression to compute (and also on the data source). If the data source is a DataTable object, you can use the Compute method to easily calculate functions on a particular column. Here's an example that sums up the values in the Price column and displays the result in the footer of the third column formatted as a currency:

Dim price As Decimal

price = Convert.ToDecimal(data.Compute("sum(price)", ""))

e.Item.Cells(2).HorizontalAlign = HorizontalAlign.Right

e.Item.Cells(2).Text = String.Format("{0:c}", price)

The DataGrid in Figure 4 contains a footer that counts the total of rows displayed through the grid. Also, you can delete or add cells as well as modify the layout dynamically in the footer row.

Although the ItemCreated and ItemDataBound events are different events that occur at different times in the lifecycle of a DataGrid, they look similar and fire one after the other. The former fires immediately after the grid item has been created. The latter fires only when the item has been successfully bound to its data item. It goes without saying that for dataless items such as the header and footer, the ItemDataBound event is never fired.

7. Add First/Last Buttons to the Pager

The DataGrid supports paging and two navigation models: sequential and random. A sequential, next/previous navigation model can be made even richer by using a pair of extra links for the first and last pages of the data source. This feature comes natively with Whidbey but it must be manually coded in ASP.NET 1.x. You must modify the pager bar on the fly to accommodate for the extra buttons, add a handler for the Click event, and update the view. This code shows how you to modify the pager bar by adding the links for the first and last pages. The key procedure is the ItemCreated event handler:

If e.Item.ItemType = ListItemType.Pager Then

   If grid.PagerStyle.Mode = PagerMode.NextPrev Then

      Dim pager As TableCell = e.Item.Cells(0)

      AddLinkFirstPage(pager)

      AddLinkLastPage(pager)

   End If

End If

The pager is represented as a row with a single cell. All paging elements are added as free markup text within the space reserved for a single cell.

The First and Last buttons are added as link buttons or labels, depending on the page index. If the link can be clicked on to go to the first or last page, you render the button as a link; otherwise, you render it as a label. Let's tackle adding the First button with no significant changes expected for the Last button.

The First button must be rendered as a link button only if the Previous button is a link. The Previous button is the first in the Controls collection when the helper subroutine AddLinkFirstPage runs. As you can see, you check the type of the Previous link and then create a LinkButton or Label control accordingly (see Figure 5).

Sub AddLinkFirstPage(ByVal pager As TableCell)

    If TypeOf(pager.Controls(0)) Is LinkButton Then

        Dim btnFirst As LinkButton = New LinkButton()

        btnFirst.Font.Name = "webdings"

        btnFirst.Font.Size = FontUnit.Larger

        btnFirst.ForeColor = grid.PagerStyle.ForeColor

        btnFirst.Text = "3"

        AddHandler btnFirst.Click, AddressOf GoToFirstPage

        pager.Controls.AddAt(0, btnFirst)

    Else

        Dim btnFirst As Label = New Label()

        btnFirst.Font.Name = "webdings"

        btnFirst.Font.Size = FontUnit.Larger

        btnFirst.ForeColor = grid.PagerStyle.ForeColor

        btnFirst.Text = "3"

        pager.Controls.AddAt(0, btnFirst)

    End If

End Sub

 

Sub GoToFirstPage(ByVal sender As Object, ByVal e As EventArgs)

    grid.CurrentPageIndex = 0

    BindData()

End Sub

Figure 5. Add a First button to the new pager to go to the first page of the bound data source.

You should ensure that the font and color used for the First and Last buttons is identical to that used for the default buttons in the pager. You can read the default settings from the DataGrid's PagerStyle object. Take a look at an example of this technique (see Figure 6). The First and Last buttons are rendered using Webdings glyphs. In this case, it is a good practice to slightly enlarge the font size.

Figure 6. Add a pair of First/Last page buttons to the DataGrid's pager.

8. Control the Selection Process

Whenever users click on selectable DataGrid items, the SelectedIndexChanged event is fired. A selectable item is any text displayed within a command column characterized by the Select command name. Each command column is associated with a command name that is passed as an argument to the ItemCommand event. Each client click results in the ItemCommand server event where the command name helps to distinguish between multiple command columns. A command name is just a verb. A few of them, such as Select, Delete, and Edit, are prebuilt into the DataGrid control.

Once you have a Select command column, any click results in a pair of events: ItemCommand and SelectIndexChanged. The former event is generic and raised because the select command is a command column first and foremost. The latter event is fired a little later, when the DataGrid realizes that the name of the command column is Select. In this case, the row is rendered applying all the styles defined by the SelectedItemStyle property. This sequence of events can be exploited to implement a toggling mechanism for the row selection. If users click on the Select button, the row is rendered as selected; if the users click on the button in a selected row, the same row is deselected. Here is the code that implements this feature:

Private m_ currentSelectedIndex As Integer

Sub ItemCommand(sender As Object, _

    e As DataGridCommandEventArgs)

  Select Case e.CommandName

     Case "select"

         m_currentSelectedIndex = grid.SelectedIndex

  End Select

End Sub

 

Sub SelectedIndexChanged(sender As Object, e As EventArgs)

   If m_currentSelectedIndex = grid.SelectedIndex Then

      grid.SelectedIndex = -1

      Return

   End If

   SelectItem()

End Sub

The index of the selected item is stored in the SelectedIndex property. This property is not updated yet to reflect the selection when the ItemCommand event fires. In light of this, you cache the old index during ItemCommand and then compare that to SelectedIndex when the SelectedIndexChanged event arrives. If the two values coincide, then the user clicked on a selected row and you deselect it. Note that command names are case-sensitive.

To select a DataGrid row, you must click on the Select button. Can you get the same by clicking anywhere in the row? The idea is that you add the postback code to the entire DataGrid row during the ItemDataBound event:

Dim gridRow As DataGridItem

gridRow = e.Item

e.Item.Attributes("onclick") = _

   GetPostBackClientHyperlink(selectButton, "")

The selectButton in this code snippet indicates the grid's Select link button. In the "Advanced DataGrid Links" sidebar, you'll find a reference to an MSDN article that explains the trick in greater detail. 

9. Associate Grid Buttons and Popup Windows

Buttons are common in the layout of a DataGrid. They represent actions that the user can execute on the data shown in the grid. Quite reasonably, some of these actions can modify data and alter the state of the application. Asking the user for a confirmation is not a far-fetched idea. But how do you implement that?

The simplest way is to add some JavaScript code that runs when the button is clicked - all buttons are always rendered as INPUT tags on the browser. For items and alternating items, you handle the ItemCreated event, locate the button, and add the name of a global JavaScript code to the OnClick attribute of the control:

Command column is the third one (cell index 2)

Dim ctl As WebControl

ctl = CType(e.Item.Cells(2).Controls(0), WebControl)

ctl.Attributes("onclick") =

   "return confirm('Do you want to edit this item?');"

The code associated with the OnClick client event is a simple JavaScript snippet. This technique can be further refined to make the popup window context sensitive. To obtain this, move the code in the ItemDataBound event:

Sub ItemDataBound(sender As Object, _

     e As DataGridItemEventArgs)

   Dim itemType As ListItemType

   itemType = e.Item.ItemType

   Select Case itemType

      Case ListItemType.Item

           SetupItem(e)

      Case ListItemType.AlternatingItem

           SetupItem(e)

   End Select

End Sub

When the ItemDataBound event fires, the data element for the row being drawn is stored in the DataItem property of the DataGridItem object. This is not true when the ItemCreated event arrives:

Sub SetupItem(e As DataGridItemEventArgs)

   Dim ctl As WebControl

   ctl = CType(e.Item.Cells(2).Controls(0), WebControl)

   Dim row As DataRowView

   row = CType(e.Item.DataItem, DataRowView)

 

   Dim code As String

   code = "return confirm('Do you want to edit [{0}]?');"

   ctl.Attributes("onclick") = String.Format(code,

       row("lastname"))

End Sub

You can view the results (see Figure 7).

Figure 7. A context-sensitive popup window asks for confirmation before a critical operation.

10. Do More With Custom Controls

All the features examined in this article can be implemented on top of existing DataGrid controls in existing pages. To apply the tricks I've discussed here you don't need to rework your pages; you can simply enhance them with a limited effort. By handling events and combining properties together, you primarily improve the grid's user interface and add simple extra functionality. To accomplish more advanced things, configuration is not enough; you must resort to creating your own DataGrid control.

The first step consists of deriving a new control and making it inherit from the base DataGrid class. All the tricks described here can be incorporated into a new control to enhance the user interface. By deriving a new control, though, you have access to all the protected members - properties and methods. This gives you unprecedented power because you can interact with the underpinnings of the base control and can modify internal aspects such as the generation of the markup, the order of columns, and the structure of the control.

Deriving a new control from DataGrid shouldn't break any existing code because all the base features are automatically inherited and, hence, preserved. However, the more you drill down into the nitty-gritty details of the control and alter built-in behaviors, the more you put backward compatibility at risk.

The bottom line is that the DataGrid control is highly configurable and feature rich. You can easily go beyond the base set of features in two ways: through the public interface of the control or through inheritance. The second approach is more complex and requires familiarity with object-oriented programming concepts, the ASP.NET framework, and DataGrid plumbing. The first approach is far simpler and pays the bill in most cases. Advanced features such as representing hierarchical data and scrolling items require a custom control.