In this article I will explain how to style the GridView default Pager using CSS Class Styles in ASP.Net.
Database
For this article I am making use of the Microsoft’s Northwind Database. Download and install instructions are provided in the link below
HTML Markup
The HTML Markup consists of an ASP.Net GridView. For the GridView I have enabled paging using the AllowPaging property and I have also specified on the OnPageIndexChanging event.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" ItemStyle-Width="150px" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="100px" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100px" />
</Columns>
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
</asp:GridView>
Namespaces
You will need to import the following namespaces
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
Binding the GridView
Below is the code to bind the GridView with records from the Customers table of the Northwind database
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}
}
Styling the GridView Pager
In order to style the GridView Pager you need to follow the following
1. Add the following CSS classes to the page or the CSS file.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.GridPager a, .GridPager span
{
display: block;
height: 15px;
width: 15px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.GridPager a
{
background-color: #f5f5f5;
color: #969696;
border: 1px solid #969696;
}
.GridPager span
{
background-color: #A1DCF2;
color: #000;
border: 1px solid #3AC0F2;
}
</style>
2. Next you need to assign the Pager CSS Class to the Page using the PagerStyle-CssClass property as shown below
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
GridView before Pager Styling
![Styling ASP.Net GridView Pager using CSS Style example]()
GridView after Pager Styling
![Styling ASP.Net GridView Pager using CSS Style example]()
Demo
Downloads
