ASP.NET GridView Paging Problem – Paging Increases the First Column Width

A request came to my desk today about a project that is using an ASP.NET 2.0 DataGrid control to display a set of data. The DataGrid has paging enabled, but the client was complaining that the first column of the report was far too wide for the data it was displaying.

I took a look into this and the client definitely had a point. Although the numeric values of the first column were single digit integers, the Paging information that the ASP.NET environment was appending extended the width of the first ID column to over 150 pixels which was far too wide.

The Problem with the DataGrid Control

When I looked into the HTML markup of the DataGrid the reason for the large first column became apparent. The DataGrid was displaying rows of data with 5 table cells per row, but the final paging row being appended to the DataGrid only had a single table cell into which the numeric paging links were being added.

I looked this problem up online and found that many people have run into this bug throughout the past few years. But I assume that  no fix for this issue has ever been released since the DataGrid control is now deprecated.

Below is an example of what the last two rows of markup looked like for the DataGrid, with the last (paging) row containing only one table cell.

<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td><span>1</span>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl01','')">2</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl02','')">3</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl03','')">4</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl04','')">5</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl05','')">6</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl06','')">7</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl07','')">8</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl08','')">9</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl09','')">10</a>&nbsp;<a href="javascript:__doPostBack('DataGrid1$ctl24$ctl10','')">...</a></td>
</tr></table>

Comparison of the DataGrid HTML with a GridView’s HTML

I wanted to check if this is still a problem with the ASP.NET 4.0 GridView control. To test this I generated a GridView control with five columns and paging enabled. However from the HTML source for the GridView it is clear that the problem does not exist for this control.

The GridView control’s paging row still starts as a single cell, but in this case the cell correctly has a ColSpan tag that allows the contents to occupy the full length of the HTML table. Interestingly enough the paging row of the GridView control has each page number in a separate HTML table cell, which is quite different from the DataGrid control, in which each page number was linked one after the other.

Here is an example of the HTML markup generated by the GridView control:

<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td colspan="5">
<table><tr>
<td><span>1</span></td><td><a href="javascript:__doPostBack('GridView1','Page$2')">2</a></td><td><a href="javascript:__doPostBack('GridView1','Page$3')">3</a></td><td><a href="javascript:__doPostBack('GridView1','Page$4')">4</a></td><td><a href="javascript:__doPostBack('GridView1','Page$5')">5</a></td><td><a href="javascript:__doPostBack('GridView1','Page$6')">6</a></td><td><a href="javascript:__doPostBack('GridView1','Page$7')">7</a></td>
</tr></table></td>
</tr></table>

Correcting the DataGrid’s Paging Row Markup

It is clear that to fix the problem with the HTML table markup for the DataGrid’s Paging row, the HTML for the Paging row’s single cell needs to include a colspan tag with the correct number of columns.

One can make this adjustment in the PreRender event of the DataGrid with just a few lines of code. The code to do so is as follows:

Protected Sub DataGrid1_PreRender(sender As Object, e As System.EventArgs)
Dim tbl As Table = CType(DataGrid1.Controls(0), Table)
Dim pagerRow As TableRow = tbl.Rows(tbl.Rows.Count - 1)
pagerRow.Cells(0).Attributes.Add("colspan", tbl.Rows(1).Cells.Count.ToString())
End Sub

Although the DataGrid control has been deprecated, many older projects still make extensive use of this control, so it is important to have a fix for the buggy behavior. Thankfully this issue with automated paging did not carry over as a problem to the GridView control which has replaced the DataGrid control.