GridView Pager html is unsuitable for CSS due to whitespace

Feb 18, 2008 at 2:36 PM
I have a very simple suggestion.

The GridView produces its pager output like so:

<div class="AspNet-GridView-Pagination AspNet-GridView-Bottom">
<span>1</span>
<a href="javascript:__doPostBack('gvAwarded','Page$2')">2</a>
<a href="javascript:__doPostBack('gvAwarded','Page$3')">3</a>
<a href="javascript:__doPostBack('gvAwarded','Page$11')">...</a>
<a href="javascript:__doPostBack('gvAwarded','Page$Last')">>></a>
</div>

I would prefer to create the following html:

<div id="gvAwardedPager" class="AspNet-GridView-Pagination AspNet-GridView-Bottom"><span>1</span><a href="javascript:_doPostBack('gvAwarded','Page$2')">2</a><a href="javascript:_doPostBack('gvAwarded','Page$11')">...</a><a href="javascript:__doPostBack('gvAwarded','Page$Last')">>></a></div>

(i.e. with no whitespace). The reason for this is that web browsers render the whitespace.

How about a design switch to allow the coder to set whitespace to include or exclude?

Another nice feature would be an ID for the pager div (as above) - then one could move the pager anywhere on the page, after it loads, with a bit of javascript by just copying the html and hiding the original.

Here's a html page which shows the first problem I identified. Note there must be very good reason why html menus are often written with no whitespace between the <a> elements and this is clearly it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mysite</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.AspNet-GridView-Bottom {margin:0;}
.AspNet-GridView-Pagination
{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 0.65em;
line-height: 19px;
}

.AspNet-GridView-Pagination a
{
color: #555;
padding: 4px 6px 2px;
border-right: 1px solid #c5c5c5;
}

.AspNet-GridView-Pagination span
{
background-color: #CCC;
color: #000;
font-weight:bold;
border-top: 1px solid #CCC;
padding: 4px 6px 2px;
border-right: 1px solid #c5c5c5;
}

.AspNet-GridView-Pagination a:hover
{
color: #333;
background-color: #efefef;
border-top: 1px solid #c5c5c5;
}
</style>
</head>
<body>
<p>This is the output from the Gridview</p>

<div class="AspNet-GridView-Pagination AspNet-GridView-Bottom">
<span>1</span>
<a href="javascript:__doPostBack('gvAwarded','Page$2')">2</a>
<a href="javascript:__doPostBack('gvAwarded','Page$3')">3</a>
<a href="javascript:__doPostBack('gvAwarded','Page$11')">...</a>
<a href="javascript:__doPostBack('gvAwarded','Page$Last')">>></a>
</div>

<p>I would prefer to creat the following html:</p>

<div id="gvAwardedPager" class="AspNet-GridView-Pagination AspNet-GridView-Bottom"><span>1</span><a href="javascript:_doPostBack('gvAwarded','Page$2')">2</a><a href="javascript:_doPostBack('gvAwarded','Page$11')">...</a><a href="javascript:__doPostBack('gvAwarded','Page$Last')">>></a></div>
</body>
</html>
Feb 18, 2008 at 7:00 PM
All good suggestions. Feel free to submit a patch. :)