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
|