Click here to Skip to main content
Click here to Skip to main content

Gridview Pager style using CSS in asp.net

, 2 Oct 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Styling Gridview Pager in ASP.NET using CSS .

 Introduction  

Here you can change the old style page number with new modern style look in gridview[ASP.NET] using CSS .

Using the code 

So First i show code step by step and then all together ,so relax and read .

1) First i am styling the pager style in gridview like padding , width , etc .

i am using css class here . 

.gridview{
    background-color:#fff;
   
   padding:2px;
   margin:2% auto;
   
   
}
2)     Now for changing the  the link color  i.e if you have total 5 pages then at bottom it appears like -  1 2 3 4  5  so for the  this add this css class
.gridview a{
  margin:auto 1%;
    border-radius:50%;
      background-color:#444;
      padding:5px 10px 5px 10px;
      color:#fff;
      text-decoration:none;
      -o-box-shadow:1px 1px 1px #111;
      -moz-box-shadow:1px 1px 1px #111;
      -webkit-box-shadow:1px 1px 1px #111;
      box-shadow:1px 1px 1px #111;
     
}
3) if you want hover effect on link not for the  one that is selected by default use this.
.gridview a:hover{
    background-color:#1e8d12;
    color:#fff;
}
4) Now for the one that is selected by default that is 1 for this use class
.gridview span{
    background-color:#ae2676;
    color:#fff;
     -o-box-shadow:1px 1px 1px #111;
      -moz-box-shadow:1px 1px 1px #111;
      -webkit-box-shadow:1px 1px 1px #111;
      box-shadow:1px 1px 1px #111;

    border-radius:50%;
    padding:5px 10px 5px 10px;
}

Here span is the default selected number it can any that you have selected .   So put all this at one place in your stylesheet or embedded in page your wish .
5)And Finally you have to add this class in your gridview as shown below  

 <asp:gridview id="g1" runat="server" gridlines="None" autogeneratecolumns="False" allowpaging="True" onpageindexchanging="g1_PageIndexChanging">
						
<pagerstyle cssclass="gridview">

</pagerstyle>

  As you see , you have add an property of gridview as i mention above and add css class in it which we made .

All done run your page see modern pager style   ,

Change color or other things as per requirement or wish .


© Narendra      

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Narendra Singh Rathore
Software Developer Pravish Technologies
India India
No Biography provided

Comments and Discussions

 
Generalnice article PinmemberBinu198530-Sep-14 21:12 
QuestionMy vote 5 PinmemberAwaidus Bin Asim7-Sep-14 6:41 
GeneralMy vote of 4 PinprofessionalJoshYates198025-Mar-14 8:18 
QuestionFormatting GridView control using Css in ASP .Net PinprofessionalRavi.Kumar0216-Jan-14 1:35 
GeneralMy vote of 5 PinmemberMember 1026667326-Nov-13 20:03 
QuestionThank you Pinmembermed12night5-Nov-13 22:18 
GeneralMy vote of 3 PinmemberNarendra Singh Rathod2-Oct-13 19:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 3 Oct 2013
Article Copyright 2013 by Narendra Singh Rathore
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid