Applying Custom Styles To Default GridView Pagination

Introduction

This article will demonstrate you how to add some customize styles to your asp.net GridView paging. In case you are using the default paging functionality in GridView/ListView/DataGrid then you may need this thing to make your website little cool and pretty.

 

Behind The Scene

Lets take the below grid view for our example. Here we are giving a CssClass to the default pager named "gridView"

 <asp:GridView ID="grd_MyExample" runat="server" CssClass="grid" AllowPaging="True" 
   OnPageIndexChanging="grd_MySalesClaims_PageIndexChanging" GridLines="None" >
    <PagerStyle CssClass="gridView"/>
    <Columns>
     <asp:BoundField DataField="UserID" />
     <asp:BoundField DataField="UserName" />
    </Columns>
 </asp:GridView>

OK, when this GridView gets loaded in the web page we can find the pagination indices are coming inside a "tr". So what we have to do in order to give some customize styles to it ????

Lets check the below CSS...

        .gridView {
            background-color: #fff;
            padding: 2px;
            margin: 2% auto;
        }

            .gridView a {
               cursor: hand;
               font-family: Verdana;
               font-size: 12px;
               padding: 2px 6px;
               border: solid 1px #ddd;
               text-decoration: none !important;
               color: Black;
            }

                .gridView a:hover {
                   background-color: #5D88AC;
                   color: #fff;
                   font-family: verdana;
                   cursor: pointer;
                }

            .gridView span {
                background-color: #5D88AC;
                color: #fff;
                font-family: verdana;
                font-size: 14px;
                padding: 2px 6px;
            }

        table.grid tr.gridView td {
            padding: 0px;
        }

Oh that's cool,Now if you look into the GridView in your webpage you can find a nice looking pagination is coming under it.

In the above CSS we have given some style to the elements like "td","tr","a" those present inside the element with class "gridView".

That's it we have just applied some customizes styles to the ASP.NET GridView.

Happy Coding...