Styling ASP.Net Gridview Pager using RowDataBound Event

Mohammed Imtiyaz Feb 6, 2015


Styling ASP.Net Gridview Pager using RowDataBound Event

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="">
      <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1"
               Width="300px" AllowPaging="True" OnRowDataBound="GridView1_RowDataBound" PageSize="5"
                  <asp:BoundField DataField="countryId" HeaderText="Country Id" SortExpression="countryId">
                     <HeaderStyle HorizontalAlign="Left" Width="40%" />
                  <asp:BoundField DataField="countryName" HeaderText="Country Name" SortExpression="countryName">
                     <HeaderStyle HorizontalAlign="Left" Width="60%" />
               <PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PageButtonCount="4"
                  PreviousPageText="Previous" Mode="NumericFirstLast" />
               <PagerStyle Height="50px" />
               <HeaderStyle Height="40px" BackColor="#669999" ForeColor="White" />
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/country.xml">


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        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", "'#ADACAC';'#FFFFFF';'hand';'underline'");
                    lb.Attributes.Add("onmouseout", "'#E6E4E4';'#000000';'underline'");
  	catch {} 
    finally {}