Tip 1: Change the style of the selected page or highlight the current page in the GridView Pager control
A simple way is to use CSS as shown below. The <PagerStyle> is set to a css class which modifies the style of the pager:
<head runat="server">
<title></title>
<style type="text/css">
.cssPager span { background-color:#4f6b72; font-size:18px;}
</style>
</head>
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
<PagerStyle CssClass="cssPager" />
...
The output is as shown below, with the style set for the current page.
Tip 2: How to increase the spacing between the ASP.NET GridView Pager Numbers
One simple way is to use CSS again. Observe how we have set a cssClass to the PagerStyle, similar to what we saw in Tip 1, and are increasing the padding for the <td>:
<head runat="server">
<title></title>
<style type="text/css">
.cssPager td
{
padding-left: 4px;
padding-right: 4px;
}
</style>
</head>
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
<PagerStyle CssClass="cssPager" />
...
The output looks similar to the following with the increased space between the page number display.
Keywords : Some Tips and Tricks while Using ASP.NET GridView Paging
|