Monday, July 20, 2015

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. 

No comments:

Post a Comment