Chapter 15 Page 535 footer issue

Falcon397 · February 10th, 2011, 06:03 PM

This is so minute I sort of feel silly asking but for some reason the page numbers in the footer of my grid appears just fine on the first page but when I go to the second page the page numbers in the footer take on the same grey background that the alternating columns have. The row is blue, it is just the page numbers that have the grey background.

Here is the code copied from my editor:

Code:

    <asp:GridView runat="server" CssClass="GridView">
      <HeaderStyle CssClass="GridViewHeaderStyle" />
      <PagerStyle CssClass="GridViewPagerStyle" />
      <SortedAscendingHeaderStyle CssClass="GridViewSortedAscendingHeaderStyle" />
      <SortedDescendingHeaderStyle CssClass="GridViewSortedDescendingHeaderStyle" />
    </asp:GridView>

<script type="text/javascript">
    $(function ()
    {
      $('.GridView tr:odd:not(.GridViewPagerStyle)').addClass('GridViewAlternatingRowStyle');
    });
  </script>

What's really strange is that I have an odd number of records, and so that means my last record has a grey background, I would assume that an error would show a white background as the grey only appears on alternating lines.

Imar · February 10th, 2011, 06:29 PM

Hi there,

I think this is actually a flaw in the book. To see why this happens, take a look at the HTML for the pager bar:

Code:

<table class="GridView" cellspacing="0" cellpadding="4" ...>
<tr> ..... Normal rows here </tr>
<tr class="GridViewPagerStyle">
  <td colspan="3">
    <table>
    <tr>
      <td><span>1</span></td><td>.... Page numbers here </td>
    </tr>
  </table>
  </td>
</tr>
</table>

As you can see, the Pager Bar is a table row of its own. So when this jQuery code fires:

Code:

$('.GridView tr:odd:not(.GridViewPagerStyle)').addClass('GridViewAlternatingRowStyle');

It finds *all* <tr> elements within the GridView table and correctly ignores the row with the class GridViewPagerStyle. However, the pager bar itself contains another <tr> which *is* matched with this jQuery code,

So, I guess the correct way to fix this is to use CSS's direct descendants, which you define using a > between elements. That is:

.GridView > tr

would find all <tr> elements that are direct children of the .GridView table. Except that it doesn't. If you don't specify a <tbody> element explicitly, browsers create one for you. So, the correct way to find the direct <tr> elements would be:

.GridView > tbody > tr

which brings the entire statement to this:

Code:

$('.GridView > tbody > tr:odd:not(.GridViewPagerStyle)').addClass('GridViewAlternatingRowStyle');

In case you have a browser that doesn't create a tbody implicitly, this should work as well:

.GridView > * > tr

Long story for a simple problem ;-) I guess I just never looked at page 2 with an odd page size.

Cheers,

Imar