Asp.net: Highlight the selected page number in Gridview Control - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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:

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

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

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:
Asp.net: Highlight the selected page number in Gridview Control


  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. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon