UI Tip
LANGUAGE:
ASP.NET VERSIONS:
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
Case 0
Return "First name of employee"
Case 1
Return "Last name of employee"
Case 2
Return "Employee's title"
Case 3
Return "Employee's hire date"
Case Else
Throw New ArgumentException("Unknown
column header index", "ColumnIndex")
End Select
End Function
This simple function will return the tooltip text based on the column index that is passed in.
To make this work we need to add some client-side JavaScript to our Web Form. Although ASP.NET original made many people think that client-side JavaScript and DHTML would no longer be necessary skills of the developer, as we have seen time and time again, these skills are needed now as much as ever to make a truly powerful ASP.NET application. Client-side events and object models should be a consideration from the early planning stages, during component purchasing choices, and in the development of the code.
In this particular example we added two client-side JavaScript functions to the header of our page. These functions will be called ShowHeaderToolTips and HideHeaderToolTips. Both of these functions are added to the HTML, but you could just as easily create them dynamically if needed.
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)
Handles DataGrid1.ItemCreated
If e.Item.ItemType = ListItemType.Header Then
Dim ColumnIndex As Int32 = 0
Dim Cell As TableCell
For Each Cell In e.Item.Cells
Cell.Attributes.Add("onmouseover",
"ShowHeaderToolTip(" + ColumnIndex.ToString()
+ ");")
Cell.Attributes.Add("onmouseout",
"HideHeaderToolTip(" + ColumnIndex.ToString()
+ ");")
ColumnIndex += 1
Next
End If
End Sub
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)
NewPanel.Controls.Add(Literal)
PlaceHolder1.Controls.Add(NewPanel)
Next
End Sub
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].
