Click here to Skip to main content
13,248,562 members (84,504 online)
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 15 Jun 2006

Better DataGrid Column Header ToolTips

, 15 Jun 2006
Rate this:
Please Sign up or sign in to vote.
Provides a technique to implement column header tooltips in a datagrid.

Sample Image - datagridheadertooltip.png


I saw a few articles out there about implementing Column Header ToolTips on an ASP.NET DataGrid control; however, I was unsatisfied with all them. Some required a function to return the tooltip text based on the column index, others required sorting to be enabled, most required JavaScript, and few promoted reuse. I thought wouldn't it be nice to just set a tag attribute on the datagrid column tag for the column header tooltip text?

Using the code

In my example, I will extend only the System.Web.UI.WebControls.DataGrid and System.Web.UI.WebControls.BoundColumn classes; however, you could easily apply this technique to all DataGrid column classes. All code is based on the 1.1 Framework, but could easily be applied to 2.0.

First, I create a class called CustomBoundColumn that inherits System.Web.UI.WebControls.BoundColumn and exposes a public string property that will be used to hold the tooltip text, called HeaderToolTip:

using System;
using System.Web.UI.WebControls;

namespace samplewebapp
    public class CustomBoundColumn : BoundColumn
        private string headerToolTip;
        public string HeaderToolTip 
            get {return headerToolTip;}
            set {headerToolTip = value;}

Now, I want to extend System.Web.UI.WebControls.DataGrid to utilize this text property. So, I create a class called CustomDataGrid which inherits System.Web.UI.WebControls.DataGrid and overrides the OnItemCreated method. This will iterate through all the DataGridItems in the header row, check for a tool tip text property, and apply that text as an HTML paragraph element title:

using System;
using System.Web.UI.WebControls;

namespace samplewebapp
    public class CustomDataGrid : DataGrid
        private const string HEADER_TOOLTIP_FORMAT = 
           @"<p title=""{0}"">{1}</p>"; 
        protected override void OnItemCreated(DataGridItemEventArgs e) { 
            if(e.Item.ItemType == ListItemType.Header) { 
                for (int i=0;i < e.Item.Cells.Count;i++) { 
                    if (Columns[i] is CustomBoundColumn) { 
                        CustomBoundColumn col = (CustomBoundColumn)Columns[i]; 
                        if (col.HeaderToolTip != null) { 
                            TableCell cell = e.Item.Cells[i]; cell.Text = 
                                            col.HeaderToolTip, cell.Text);
            //invoke base class method 


Now, I simply create an ASPX web form and register my namespace as a tag prefix using the Register directive at the top of the page:

<%@ Register TagPrefix="cc1" 

    Namespace="samplewebapp" Assembly="samplewebapp" %>

I can then create a DataGrid using my CustomDataGrid and CustomBoundColumn classes and set the HeaderToolTip property as a tag attribute:

<cc1:CustomDataGrid id="dgTest" 

        style="Z-INDEX: 101; LEFT: 304px; POSITION: absolute; TOP: 56px" 

        runat="server" AutoGenerateColumns="False">
        <cc1:CustomBoundColumn DataField="ColumnOne" 


          HeaderToolTip="This is the tooltip for One."></cc1:CustomBoundColumn>
        <cc1:CustomBoundColumn DataField="ColumnTwo" 


          HeaderToolTip="This is the tooltip for Two."></cc1:CustomBoundColumn>
        <cc1:CustomBoundColumn DataField="ColumnThree" 


          HeaderToolTip="This is the tooltip for Three."></cc1:CustomBoundColumn>

That is it, you can now mouse over the column header text to view that column header's tooltip.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Seth Deckard
Software Developer (Senior)
United States United States
Seth Deckard has been a software developer in the industry since 1999.

You may also be interested in...


Comments and Discussions

GeneralYou don't need P tags Pin
Abishek Bellamkonda20-Jun-06 20:52
memberAbishek Bellamkonda20-Jun-06 20:52 
GeneralRe: You don't need P tags Pin
sethdeckard22-Jun-06 4:54
membersethdeckard22-Jun-06 4:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 15 Jun 2006
Article Copyright 2006 by Seth Deckard
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid