Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

GridView and Paging Alignment


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>.

Make Donation
Posted in ASP.NET  


Feedback for this Post

 
# re: GridView and Paging Alignment
by PBZ August 19, 2007 @ 5:24am
How about .gridpager td { text-align:right; } ?
# re: GridView and Paging Alignment
by Sergio Pereira August 19, 2007 @ 7:53am
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;
}
# re: GridView and Paging Alignment
by Rick Strahl August 19, 2007 @ 12:13pm
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.
# re: GridView and Paging Alignment
by Sergio Pereira August 19, 2007 @ 1:56pm
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.
# re: GridView and Paging Alignment
by Rick Strahl August 19, 2007 @ 3:57pm
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>
# re: GridView and Paging Alignment
by Rainer August 20, 2007 @ 7:25am
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>
.
# re: GridView and Paging Alignment
by ufawfuo August 21, 2007 @ 9:11am
Sergio's solution works. That's what I essentially use to align the pager.
# re: GridView and Paging Alignment
by Rick Strahl August 21, 2007 @ 10:57am
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.
# re: GridView and Paging Alignment
by Liana August 24, 2007 @ 7:59am
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.
# re: GridView and Paging Alignment
by Liana August 27, 2007 @ 3:45am
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.
# re: GridView and Paging Alignment
by Russ Helfand December 02, 2007 @ 8:17am
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.
# re: GridView and Paging Alignment
by abc February 08, 2008 @ 11:06am
What colors have you used for the gridview?
# re: GridView and Paging Alignment
by Tiago September 15, 2008 @ 4:51am
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
# re: GridView and Paging Alignment
by Joel October 05, 2008 @ 6:38am
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;
}
# re: GridView and Paging Alignment
by hjh January 02, 2009 @ 1:35am
<html>
# re: GridView and Paging Alignment
by Sunil April 10, 2009 @ 1:47am
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
# re: GridView and Paging Alignment
by Anil May 06, 2009 @ 2:35am
Really helpfull
# re: GridView and Paging Alignment
by New July 02, 2009 @ 11:50pm
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,
# re: GridView and Paging Alignment
by Anthony September 23, 2009 @ 4:14pm
This worked for me:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.Pager)
{
e.Row.CssClass = "gridPager";
}
}
# re: GridView and Paging Alignment
by Valentino January 02, 2010 @ 7:18am
Joel's solution works for me very well.
Thanks
# re: GridView and Paging Alignment
by Ramesh April 23, 2010 @ 12:23am
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;
}
# re: GridView and Paging Alignment
by Chris May 17, 2010 @ 1:15pm
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%;
}
# re: GridView and Paging Alignment
by sel├žuk August 09, 2010 @ 4:04am
Thank you Chris your solution worked for me too. And thank you Rick your page helped me to find the solution.
# re: GridView and Paging Alignment
by pallavi seth August 19, 2010 @ 10:41pm
check this site also for changing grid view color http://gridviewrowcolor.blogspot.com/
# re: GridView and Paging Alignment
by saroj nayak January 20, 2011 @ 9:36pm
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
# re: GridView and Paging Alignment
by Adam Johnson March 02, 2012 @ 12:59am
Joel's solution worked for me too, none of the others did. Cheers.
 


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