This tutorial will explain you how to style Gridview pager using RowDataBound Event in ASP.Net
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1" Width="300px" AllowPaging="True" OnRowDataBound="GridView1_RowDataBound" PageSize="5" CellPadding="4"> <Columns> <asp:BoundField DataField="countryId" HeaderText="Country Id" SortExpression="countryId"> <HeaderStyle HorizontalAlign="Left" Width="40%" /> </asp:BoundField> <asp:BoundField DataField="countryName" HeaderText="Country Name" SortExpression="countryName"> <HeaderStyle HorizontalAlign="Left" Width="60%" /> </asp:BoundField> </Columns> <PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PageButtonCount="4" PreviousPageText="Previous" Mode="NumericFirstLast" /> <PagerStyle Height="50px" /> <HeaderStyle Height="40px" BackColor="#669999" ForeColor="White" /> </asp:GridView> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/country.xml"> </asp:XmlDataSource> </div> </form> </body> </html>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { try { if (e.Row.RowType == DataControlRowType.Pager) { TableRow tRow = e.Row.Controls[0].Controls[0].Controls[0] as TableRow; foreach(TableCell tCell in tRow.Cells) { Control ctrl = tCell.Controls[0]; if (ctrl is Label) { Label lbl = (Label) ctrl; lbl.Attributes.Add("Style", "text-decoration: none; padding: 5px; background-color:Red; border:1px solid Red; color:#FFF;"); } if (ctrl is LinkButton) { LinkButton lb = (LinkButton) ctrl; // To align the text in the center and to remove underline from the numbers lb.Attributes.Add("style", "text-decoration: none; padding:5px; background-color:#E6E4E4; border:1px solid #CDC9C9; color:#000000;"); lb.Attributes.Add("onmouseover", "this.style.backgroundColor='#ADACAC'; this.style.color='#FFFFFF'; this.style.cursor='hand'; this.style.textDecoration='underline'"); lb.Attributes.Add("onmouseout", "this.style.backgroundColor='#E6E4E4'; this.style.color='#000000'; this.style.textDecoration='underline'"); } } } } catch {} finally {} }