Expand the DataGrid
Learn to add tooltips to column headers.
By Brad McCabe
This week we are going to take a look at expanding the Microsoft DataGrid. Some of the most common questions I get asked often center on expanding the grid. The scenario we'll look at today involves extending the grid to add tooltips to the column headers.
Often times the amount of space is limited in the width of the column, and the text in the column header is less than descriptive or helpful to the end user. With this week's tip we'll add a tooltip to the headers when the user mouses over them. Although we are looking at just the column headers, this tip can be easily applied to other elements of the grid as well.
The first problem to tackle is how to get the values that we will display for our tooltips. These values can be stored in a database, or gathered from some external business logic or any other location that makes sense in your environment. For this example we will hardcode them in a simple function:
Private Function GetColumnHeaderTooltipText
(ByVal ColumnIndex As Int32) As String
Select Case ColumnIndex
Return "First name of employee"
Return "Last name of employee"
Return "Employee's title"
Return "Employee's hire date"
Throw New ArgumentException("Unknown
column header index", "ColumnIndex")
This simple function will return the tooltip text based on the column index that is passed in.
After adding these functions to the HTML page we'll need to wire them up to the table cells that the Data Grid will generate for our header cells. To do this we'll use the Grid's ItemCreated event. The ItemCreated event is fired as each grid item is generated.
During this event we'll test to see if the newly created element is a column header. If it is, we'll add two attributes to the element to enable our client-side events. We will use the Attributes.Add method that we have used in the past:
Private Sub DataGrid1_ItemCreated(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
If e.Item.ItemType = ListItemType.Header Then
Dim ColumnIndex As Int32 = 0
Dim Cell As TableCell
For Each Cell In e.Item.Cells
"ShowHeaderToolTip(" + ColumnIndex.ToString()
"HideHeaderToolTip(" + ColumnIndex.ToString()
ColumnIndex += 1
Now that the headers cells are wired to our show and hide functions we have to put the tooltips somewhere on the page. By adding a place holder element to the page we are able to reserve some space in the HTML to insert other elements at a later time.
During the page's PreRender event we'll create a new panel control in code and add our tooltip text to this element. The panel control will render to an HTML Div tag that we will be able to show and hide on the client-side based on the elements ID property.
A unique panel will be created for each column header and inserted into the place holder:
Private Sub Page_PreRender(ByVal sender As Object, ByVal e
As System.EventArgs) Handles MyBase.PreRender
Dim ColumnCount As Int32 = Me.DataGrid1.Columns.Count - 1
Dim LoopCounter As Int32
For LoopCounter = 0 To ColumnCount
Dim NewPanel As Panel = New Panel()
NewPanel.CssClass = "GridToolTip"
NewPanel.ID = "HToolTip" + LoopCounter.ToString()
Dim Literal = New Literal()
Literal.Text = GetColumnHeaderTooltipText(LoopCounter)
With just a few simple steps we are now able to extend the Microsoft Data Grid to be able to display additional and more complete information about a column header when the user mouses over the header. Applying some of the various skills we have looked at in the past lays the foundation for us to create great-looking applications with all the features that our users are used to in the their desktop applications.
Figure 1. Mouse over a header to display additional information.
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].