Creating a GridView with Resizable Column Headers

Before I get into the implementation details, here is a quick screen shot of the grid. Unfortunately the mouse cursor didn't come across in the screen shot, but when it is placed over the cell borders in the header row, it displays the east/west pointing arrow. Before I get into the implementation details, here is a quick screen shot of the grid.

Unfortunately the mouse cursor didn't come across in the screen shot, but when it is placed over the cell borders in the header row, it displays the east/west pointing arrow.

Adding this behavior to the existing GridView required implementing a handful of JavaScript functions. My approach for implementing this features was to do the following:

1. Handle each of the header cells's mousemove events to determine when the user has the cursor placed roughly over the cell's right hand border. If a resize is already in processes then I use this event to determine what the new width of the column should be
2. Handle each of the header cell's mousedown events to determine when the resizing begins
3. Handle the document's mouseup event. When this occurs I make sure that the resize has stopped
4. Handle the document's selectstart event. I cancel this event if a resize is currently in executing. Doing this make's sure that the header cell's text isn't highlighted when I am resizing the cell. I learned this trick from the AjaxControlToolkit's ResizeableControlExtender.
   

Download the Code