Click here to Skip to main content
11,577,643 members (23,392 online)
Click here to Skip to main content

Gridview Pager style using CSS in asp.net

, 2 Oct 2013 CPOL 53.5K 15
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

You may also be interested in...

Comments and Discussions

 
QuestionVote of 6 Pin
Nurudeen Alimi9-Feb-15 23:06
memberNurudeen Alimi9-Feb-15 23:06 
Generalnice article Pin
Binu198530-Sep-14 21:12
memberBinu198530-Sep-14 21:12 
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
Member 1026667326-Nov-13 20:03
memberMember 1026667326-Nov-13 20:03 
QuestionThank you Pin
med12night5-Nov-13 22:18
membermed12night5-Nov-13 22:18 
GeneralMy vote of 3 Pin
Narendra Singh Rathod2-Oct-13 19:55
memberNarendra 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 | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 3 Oct 2013
Article Copyright 2013 by Narendra Singh Rathore
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid