Click here to Skip to main content
15,075,864 members
Articles / Web Development / CSS
Tip/Trick
Posted 2 Oct 2013

Stats

115.7K views
15 bookmarked

Gridview Pager style using CSS in asp.net

Rate me:
Please Sign up or sign in to vote.
4.83/5 (19 votes)
2 Oct 2013CPOL1 min read
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 . 

CSS
.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
CSS
.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.
CSS
.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
CSS
.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.NET
 <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

 
QuestionVote of 6 Pin
Nurudeen Alimi9-Feb-15 23:06
professionalNurudeen Alimi9-Feb-15 23:06 
QuestionMy vote 5 Pin
Awaidus Bin Asim7-Sep-14 6:41
MemberAwaidus Bin Asim7-Sep-14 6:41 
GeneralMy vote of 4 Pin
JoshYates198025-Mar-14 8:18
professionalJoshYates198025-Mar-14 8:18 
QuestionFormatting GridView control using Css in ASP .Net Pin
Ravi.Kumar0216-Jan-14 1:35
professionalRavi.Kumar0216-Jan-14 1:35 
GeneralMy vote of 5 Pin
Amit Kumar14326-Nov-13 20:03
professionalAmit Kumar14326-Nov-13 20:03 
QuestionThank you Pin
med12night5-Nov-13 22:18
Membermed12night5-Nov-13 22:18 
GeneralMy vote of 3 Pin
Narendra Singh Rathore2-Oct-13 19:55
professionalNarendra Singh Rathore2-Oct-13 19:55 

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

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