The problem is that browsers (FireFox and IE6) render the white space between the <a> tags.
Also notice that I would prefer to give the pager div an id so that I can move it elsewhere on the page. I really want to display the pager to the LHS of the GridView rows.
Is it fairly easy to modify the html and are there a blogs or tutorial that can point me in the right direction?, if so can someone point me in that direction?
Here are my styles (these class names are automatically rendered by the aforementioned asp.net GridView.). I am not assigning a specific style to the GridView as all my GridViews will have the same pager style. [if you put the style below in a html page with
the two snippets above you can see for yourself what the problem is with the html from the CSS-Friendly GridView - given that this is such as well known problem I'm surprised they chose to write it like that ]
The default browser behavior is to ignore white space. Your white space problem is almost certainly being caused by CSS. Have you tried removing the padding from your .AspNet-GridView-Pagination a style? I would download the Web Developer Toolbar and use
that to find what's creating the white space between your links.
Regarding the ID, do you have multiple gridviews on your page? If not, you can use div.AspNet-GridView-Pagination to reference the div in your CSS.
The default browser behaviour is to render white space when it is between <a> tags - as it is here. My whitespace problem is not caused by CSS; although there is probably some really ugly CSS hack out there which will 'fix' it.
The space being displayed is caused by a design decision taken by the authors of the HTML spec. When there is a sequence of <a> elements the white space between them should render so that each hyperlink can be distinctly seen. The only way to stop this is
to put no white space between the tags. That is why one frequently sees code like this:
Well I'll be damned. Here's what you can do, assuming you are using the
9278 version of the code, make the following changes to your GridViewAdapter.cs:
Comment out the writer.WriteLine(); on line 401
Insert the following statement on line 393, after the class attribute: writer.WriteAttribute("id", Extender.AdaptedControl.ClientID + "Pager");
I seem to be using the wrong version of the code but I downloaded it quite recently from here (I think) or from codeplex. The source I have consists of a website with a GridViewAdapter.cs in the App_Code/Adapters folder. As for the version number - I don't
know. The dll has a 1.0.0.0 version number. Anyhow, right at the bottom of the code, inside WritePagerSection() there is:
TableRow row = innerTable.Rows[0];
foreach (TableCell cell in row.Cells)
{
foreach (Control ctrl in cell.Controls)
{
writer.WriteLine();
ctrl.RenderControl(writer);
}
}
I can see that what the corresponding line to remove is but I can't quite see where I should insert that line to associate an ID with the div. I put it here anyway:
goes to:
writer.WriteBeginTag("div");
writer.WriteAttribute("id", Extender.AdaptedControl.ClientID + "Pager");
writer.WriteAttribute("class", className);
writer.Write(HtmlTextWriter.TagRightChar);
No matter, I can't figure out how to turn my source code, written as a web site, into one which just produces a single dll, because when I build it, the dll is only 80k and my current dll is 96k. I think I must have an earlier version of the source. Thanks
for your help. I am nearly there.
Member
92 Points
223 Posts
How can I modify the html output from the GridView?
Feb 18, 2008 07:58 AM|mark4asp|LINK
How can I modify the html output from the GridView?
Or, alternatively, we could make it a CSS/HTML question "How can I prevent whitespace between <a> tags being rendered?"
I've noticed that the asp.net CSS-Friendly GridView (e.g. with an id="gvAwarded") is rendering html for the pager like this:
<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$3')">3</a><a href="javascript:__doPostBack('gvAwarded','Page$11')">...</a><a href="javascript:__doPostBack('gvAwarded','Page$Last')">>></a>
</div>
The problem is that browsers (FireFox and IE6) render the white space between the <a> tags.
Also notice that I would prefer to give the pager div an id so that I can move it elsewhere on the page. I really want to display the pager to the LHS of the GridView rows.
Is it fairly easy to modify the html and are there a blogs or tutorial that can point me in the right direction?, if so can someone point me in that direction?
Here are my styles (these class names are automatically rendered by the aforementioned asp.net GridView.). I am not assigning a specific style to the GridView as all my GridViews will have the same pager style. [if you put the style below in a html page with the two snippets above you can see for yourself what the problem is with the html from the CSS-Friendly GridView - given that this is such as well known problem I'm surprised they chose to write it like that ]
.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;
}
Member
94 Points
67 Posts
Re: How can I modify the html output from the GridView?
Feb 18, 2008 01:00 PM|MikeJ83|LINK
The default browser behavior is to ignore white space. Your white space problem is almost certainly being caused by CSS. Have you tried removing the padding from your .AspNet-GridView-Pagination a style? I would download the Web Developer Toolbar and use that to find what's creating the white space between your links.
Regarding the ID, do you have multiple gridviews on your page? If not, you can use div.AspNet-GridView-Pagination to reference the div in your CSS.
HTH,
-Mike
Member
92 Points
223 Posts
Re: How can I modify the html output from the GridView?
Feb 19, 2008 05:53 AM|mark4asp|LINK
The default browser behaviour is to render white space when it is between <a> tags - as it is here. My whitespace problem is not caused by CSS; although there is probably some really ugly CSS hack out there which will 'fix' it.
The space being displayed is caused by a design decision taken by the authors of the HTML spec. When there is a sequence of <a> elements the white space between them should render so that each hyperlink can be distinctly seen. The only way to stop this is to put no white space between the tags. That is why one frequently sees code like this:
<a href="1.html">1</a><a href="2.html">2</a><a href="3.html">3</a>
or like this:
<a href="1.html">1</a><a
href="2.html">2</a><a
href="3.html">3</a>
which we tend to get when the html coder is using CSS to render the list of links as a list of boxes.
Member
94 Points
67 Posts
Re: How can I modify the html output from the GridView?
Feb 19, 2008 02:21 PM|MikeJ83|LINK
Well I'll be damned. Here's what you can do, assuming you are using the 9278 version of the code, make the following changes to your GridViewAdapter.cs:
Comment out the writer.WriteLine(); on line 401
Insert the following statement on line 393, after the class attribute: writer.WriteAttribute("id", Extender.AdaptedControl.ClientID + "Pager");
Recompile and your done.
Member
92 Points
223 Posts
Re: How can I modify the html output from the GridView?
Feb 26, 2008 09:56 AM|mark4asp|LINK
I seem to be using the wrong version of the code but I downloaded it quite recently from here (I think) or from codeplex. The source I have consists of a website with a GridViewAdapter.cs in the App_Code/Adapters folder. As for the version number - I don't know. The dll has a 1.0.0.0 version number. Anyhow, right at the bottom of the code, inside WritePagerSection() there is:
TableRow row = innerTable.Rows[0];
foreach (TableCell cell in row.Cells)
{
foreach (Control ctrl in cell.Controls)
{
writer.WriteLine();
ctrl.RenderControl(writer);
}
}
I can see that what the corresponding line to remove is but I can't quite see where I should insert that line to associate an ID with the div. I put it here anyway:
writer.WriteBeginTag("div");
writer.WriteAttribute("class", className);
writer.Write(HtmlTextWriter.TagRightChar);
goes to:
writer.WriteBeginTag("div");
writer.WriteAttribute("id", Extender.AdaptedControl.ClientID + "Pager");
writer.WriteAttribute("class", className);
writer.Write(HtmlTextWriter.TagRightChar);
No matter, I can't figure out how to turn my source code, written as a web site, into one which just produces a single dll, because when I build it, the dll is only 80k and my current dll is 96k. I think I must have an earlier version of the source. Thanks for your help. I am nearly there.
Member
92 Points
223 Posts
Re: How can I modify the html output from the GridView?
Feb 26, 2008 10:07 AM|mark4asp|LINK
I got the most recent source form codeplex and have now fixed the problem. Thanks again.