Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows

GridView and Paging Alignment


:P
On this page:

Not sure why I haven't run into this before, but I ran into a problem with paging in a GridView where the pager isn't properly showing up on the right right side of the grid view. Well, correction:All browsers but IE handle the paging incorrectly even when you set the alignment on the page row. For example:

<asp:GridView runat="server" ID="grdCustomers" cssclass="blackborder" 
        CellPadding="3" 
style="width:800px;" AutoGenerateColumns="false" onrowcommand="grdCustomers_RowCommand" PageSize="4" AllowPaging="true" onpageindexchanging="grdCustomers_PageIndexChanging" PagerSettings-Mode="NumericFirstLast" PagerSettings-PageButtonCount="10" > <AlternatingRowStyle CssClass="gridalternate" /> <HeaderStyle CssClass="gridheader" /> <PagerStyle cssClass="gridpager" HorizontalAlign="Right" /> <SelectedRowStyle BackColor="teal" /> <Columns> <asp:HyperLinkField DataTextField="Company" HeaderText="Company" DataNavigateUrlFields="Pk"
DataNavigateUrlFormatString="ShowCustomer.aspx?id={0}" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="LastOrder" HeaderText="Last Order" /> <asp:TemplateField HeaderText="Action" ItemStyle-HorizontalAlign="center" ItemStyle-Width="70px" > <ItemTemplate> <asp:LinkButton runat="server" CommandName="DeleteCustomer" CommandArgument='<%# Eval("pk") %>'
Text="Delete" ></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

I use a pager style which is defined something like this in a CSS stylesheet:

.gridpager, .gridpager td
{ text-align: right; color: cornsilk; font-weight: bold; text-decoration: none; } .gridpager a
{
    color: White;
    font-weight: normal;
}

The right align is supposed to handle shifting over the pager text to the right. Note that both the style and the HorizontalAlign="right" on the PagerStyle are meant to do.

The above works fine in IE, but doesn't product the right results in FireFox.

IE (and also in the Orcas Designer):

FireFox:

So the GridView renders text-alignment: right; into the style for the row, but the pager is actually rendered as a table inside the table column that makes up the pager row:

<tr class="gridpager" align="right">
    <td colspan="4"><table border="0">
        <tr>
            <td><span>1</span></td>
            <td><a href="javascript:__doPostBack('ctl00$Content$grdCustomers','Page$2')">2</a></td>
        </tr>
    </table></td>
</tr>

The problem here is that alignment shouldn't be set on the row but on the inner column and this is what causes FireFox to refuse to render the pager right aligned. Actually I'm not quite sure why this isn't working because the .gridpager td should apply to the column as well and it has right alignment for text. I think the issue is that text-align doesn't apply to layout elements like the embedded table - in fact FireBug seems to indicate that the text-align is in fact set to right.

I don't think there's a way to get around this declaratively, which is pretty sucky, since it's probably the most common scenario to have the pager render right. But it's possible to do programmatically:

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);            
    GridViewRow pagerRow = grdCustomers.BottomPagerRow;
    pagerRow.Cells[0].Attributes.Add("align", "right");
}

which produces:

<tr class="gridpager" align="right">
    <td align="right" colspan="4">
    <table border="0">
        <tr>
            <td><span>1</span></td>
            <td><a href="javascript:__doPostBack('ctl00$Content$grdCustomers','Page$2')">2</a></td>
        </tr>
    </table>
    </td>
</tr>

The align="right" makes this work.

Ugly, ugly, but it works.

See a way to make this work declaratively and better yet with CSS only? Maybe I'm missing a CSS tag that allows compositional right alignment for child content. text-align seems to be applied to the column, but because the content isn't text it has no effect at least in Mozilla style browsers. Fun stuff happens when you play around with float:right and position:absolute/right <g>.

Posted in ASP.NET  

The Voices of Reason


 

PBZ
August 19, 2007

# re: GridView and Paging Alignment

How about .gridpager td { text-align:right; } ?

Sergio Pereira
August 19, 2007

# re: GridView and Paging Alignment

Maybe this can be achieved with more specific CSS selector:

.gridpager, .gridheader td, .gridheader td table td
{
text-align: right;
color: cornsilk;
font-weight: bold;
text-decoration: none;
}

Rick Strahl
August 19, 2007

# re: GridView and Paging Alignment

I don't think that's the problem though - text-align doesn't work with block elements like table I think. When I look up the column in FireBug's Inspect view it shows that text-align is indeed applied (through .gridpager td as I have it above). But it has no effect because it's a table. If it were plain text/link content it would likely work.

Sergio Pereira
August 19, 2007

# re: GridView and Paging Alignment

Sorry, the last 'gridheader' was supposed to read 'gridpager'
.gridpager, .gridheader td, .gridpager td table td
{ .... }

Anyway, I haven't tried it out to be honest. Dodging the problem for a second, I end to put pagers on the left because of unexpected horizontal scrolling that keeps surprising me when live data is fed into the grid.

Rick Strahl
August 19, 2007

# re: GridView and Paging Alignment

Right actually my fault - I noticed that my posted CSS had .gridheader td instead of .gridpager td. IAC, it doesn't work with that CSS.

Content alignment continues to be one of the big problems with CSS only layouts because there are number of ways where CSS simply is inadequate to properly position elements in inline layout: centering and right alignment of block elements particularily. Centering sometimes can be achieved with margins, but I don't think this works with right alignment.

Ultimately though it's funky that the GridView generates a table for page numbers/labels. This seems like a really odd choice - I presume done to avoid wrapping? <shrug>

Rainer
August 20, 2007

# re: GridView and Paging Alignment

Hi Rick,
Have you tried CSSAdapters from www.asp.net/CSSAdapters/Default.aspx
I'm not sure if they work in VS2008. Anyway the adapted GridView eliminates the use of inline styles. Rows within the table are organized into thead, tfoot and tbody sections. These make it easier to read and understand the markup. More importantly, these sections make it easy to create CSS rules that govern the appearance of particular rows within the table.

Snippet of HTML (pager) when using the adapters (from gridview example):

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

ufawfuo
August 21, 2007

# re: GridView and Paging Alignment

Sergio's solution works. That's what I essentially use to align the pager.

Rick Strahl
August 21, 2007

# re: GridView and Paging Alignment

You sure that works in FireFox? It works in IE and the designer...

@Rainer - I've been meaning to take a look at the CSS adapters. Tried to install them yesterday but had no luck unfortunately. The VSI won't install for some reason (presumably because of some Orcas issue - looks like any VSI files won't install). Actually I couldn't even open the CSS Adapter VSI as a .Zip file either - not quite sure what the issue is exactly.

Liana
August 24, 2007

# re: GridView and Paging Alignment

The solution with writing code in OnPreRender does not work properly, it only displays the paging on the right the first time, but when loading the page once again it displays it on the left. And the solution given by Sergio is not ok, i've tried it and it doesn't work. I am still looking for a solution to this problem.

Liana
August 27, 2007

# re: GridView and Paging Alignment

I managed to solve this problem. First of all I have the .css file where I put:

.tablePager
{
color: black;
background-color: #a2c6f1;
text-align: right;
}

My asp:GridView is 'MyGridView' and I set its PagerStyle->CssClass Property to tablePager. Of course this is not enough for Mozilla because it creates an additional table inside the initial pager column.

The solution is to set the cell's 'align' attribute (the cell that contains that table) to 'right' programatically in the RowCreated event:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
    { 
        if (e.Row.RowType==DataControlRowType.Pager)
        {
            e.Row.Cells[0].Attributes.Add("align", "right");
        }
    }


If you have a better suggestion please let me know, but this worked for me.

Russ Helfand
December 02, 2007

# re: GridView and Paging Alignment

Rick, have you tried installing the CSS Friendly adapters (http://www.asp.net/cssadapters/Default.aspx) on the final (released) version of VS 2008?

I did so with the 2008 version of VWD just a moment ago and it seemed to work just fine. If you continue to have problems with the VSI, please let me know (or contact folks on the VS team).

The VSI file itself is "signed" so it can't be treated like a normal ZIP by merely renaming it as such and opening it. The signing process is done by folks at MS just prior to posting the VSI for live distribution to the public. The version of the VSI that I handed off to MS originally was, of course, unsigned. If you need a version like that, I can provide it but, like I said, it shouldn't be necessary because the VSI should install without a hitch. If it doesn't there are bigger problems brewing.

abc
February 08, 2008

# re: GridView and Paging Alignment

What colors have you used for the gridview?

Tiago
September 15, 2008

# re: GridView and Paging Alignment

adding the class:

.grid_pager_row td table
{
...
}

and the attribute:

PagerStyle-CssClass="grid_pager_row"


to the GridView node does the trick, no backcode needed and no adapted controls also

Joel
October 05, 2008

# re: GridView and Paging Alignment

Try adding margin properties to the css for the pager table. This is what allows you to manipulate positioning within mozilla etc.

example:

.gridpager, .gridpager table{
text-align: right;
margin-left:auto;
margin-right:5px;
color: cornsilk;
font-weight: bold;
text-decoration: none;
}

hjh
January 02, 2009

# re: GridView and Paging Alignment

<html>

Sunil
April 10, 2009

# re: GridView and Paging Alignment

Nice one Liana ...
i will clear one thing if you have applied a CSS to grid containg align = center. your suggestion will not work. just remove the align property from CSS and the set it in rowcreated event.
THanks

Anil
May 06, 2009

# re: GridView and Paging Alignment

Really helpfull

New
July 02, 2009

# re: GridView and Paging Alignment

Hai,

I added PagerStyle-HorizontalAlign="Right" to the asp:GridView & removed the "text-align: right;" style from the CSS class which was used as PagerStyle-CssClass.

This worked for me. Any thoughts??

Thanks,

Anthony
September 23, 2009

# re: GridView and Paging Alignment

This worked for me:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.Pager)
{
e.Row.CssClass = "gridPager";
}
}

Valentino
January 02, 2010

# re: GridView and Paging Alignment

Joel's solution works for me very well.
Thanks

Ramesh
April 23, 2010

# re: GridView and Paging Alignment

Here is a simple solution with CSS, no server side code required...


<asp:GridView runat="server" ID="grdCustomers" cssclass="blackborder"
CellPadding="3" style="width:800px;"
AutoGenerateColumns="false" onrowcommand="grdCustomers_RowCommand"
PageSize="4" AllowPaging="true" onpageindexchanging="grdCustomers_PageIndexChanging"
PagerSettings-Mode="NumericFirstLast"
PagerSettings-PageButtonCount="10"
>
<AlternatingRowStyle CssClass="gridalternate" />
<HeaderStyle CssClass="gridheader" />
<PagerStyle cssClass="gridpager" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="teal" />
<Columns>
<asp:HyperLinkField DataTextField="Company" HeaderText="Company" DataNavigateUrlFields="Pk" DataNavigateUrlFormatString="ShowCustomer.aspx?id={0}" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="LastOrder" HeaderText="Last Order" />
<asp:TemplateField HeaderText="Action" ItemStyle-HorizontalAlign="center" ItemStyle-Width="70px" >
<ItemTemplate>
<asp:LinkButton runat="server" CommandName="DeleteCustomer"
CommandArgument='<%# Eval("pk") %>' Text="Delete" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


.gridpager, .gridpager td{
text-align: right;
color: cornsilk;
font-weight: bold;
text-decoration: none;
}

.gridpager Table
{
width: 20%;
float:right;
}

Chris
May 17, 2010

# re: GridView and Paging Alignment

I added width:100% and it worked for me:

.gridpager, .gridpager td
{
text-align: right;
color: cornsilk;
font-weight: bold;
text-decoration: none;
width:100%;
}

selçuk
August 09, 2010

# re: GridView and Paging Alignment

Thank you Chris your solution worked for me too. And thank you Rick your page helped me to find the solution.

pallavi seth
August 19, 2010

# re: GridView and Paging Alignment

check this site also for changing grid view color http://gridviewrowcolor.blogspot.com/

saroj nayak
January 20, 2011

# re: GridView and Paging Alignment

u can try by giving margin-left and margin-right to the grid pager.
Something like this :

.grid .grid-pager, .grid .grid-pager td table
{
text-align:right/left/center;
margin 0px 45%; /*this margin depends on wat size is ur grid*/
}

worked for. No need of server code and horizontalalign in <PagerStyle> of grid

Adam Johnson
March 02, 2012

# re: GridView and Paging Alignment

Joel's solution worked for me too, none of the others did. Cheers.

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024