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')">&gt;&gt;</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')">&gt;&gt;</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;
}

 

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

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.

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.

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.

I got the most recent source form codeplex and have now fixed the problem.  Thanks again.