Asp.net: Highlight the selected page number in Gridview Control

In this article I am going to explain how to highlight the selected page number in Gridview Control in Asp.net

Description:

In the previous article I have explained Asp.net: Enable pagination (Paging) inGridview control and Set number of rows to display in Gridview according toDropdown Selection in Asp.net

When we select any page number in gridview pager it is highlight as shown attached snapshot.

I want to improve the look and feel of Gridview pager. To change it I have add some CSS style and set the CSS class in PagerStyle. 

Implementation:

Add the below given style to Head section of Webform:

<style type="text/css">        

         .PagerCSS a {

             padding:5px;

             background-color:#000;

             color: #fff;

    text-decoration: none;

    border: solid 1px #AAE;

    font-weight:bold;

    font-size:12pt;

       }

            .PagerCSS span

{ color:#009900;

font-weight:bold;

 font-size:16pt;

 }

  </style>

Now set the CssClass in PagerStyle of gridview.

Gridview markup:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging">

            <PagerStyle CssClass="PagerCSS" />

            <Columns>

                <asp:BoundField DataField="SudentName" HeaderText="Name" />

                 <asp:BoundField DataField="Fee" HeaderText="Fee" />

                 <asp:BoundField DataField="StudentClass" HeaderText="Class" />

                <asp:BoundField DataField="StudentRollNo" HeaderText="Roll Number" />

            </Columns>

        </asp:GridView>

Now run the project and see the result.

DEMO:

  In this article we have learn How to highlight the selected page number in Gridview control in Asp.net using (C#, VB). I hope you enjoyed this article.