Style GridView and Pager with custom css in simple steps

In this article we will see how to style GridView and associated pager with custom CSS. Most of times we developers receive website designs in the form of HTML and CSS. It is very challenging, complicated and time consuming task to make Gridview looks similar to the HTML design we are working on. Here I will demonstrate that how I have come over with this problem and made GridView Styling very easy.

Lets take a look at Gridview source.

 

  <asp:GridView AllowPaging="true" PagerStyle-CssClass="paging" OnPageIndexChanging="grdTest_PageIndexChanging"
        PageSize="10" runat="server" ID="grdTest"> 

 

Here we can see gridview is asp .net based control and does not contains any HTML elements. This makes website designers and website developers very difficult to design GridView however microsoft has provided different options to style GridView like 

1) RowStyle
2) AlternatingRowStyle
3) FooterStyle
4) HeaderStyle
5) PagerStyle
6) EmptyDataRowStyle
7) EditRowStyle
8) SelectedRowStyle

These options are enough but very complicated to convert GridView to desired format as GridView generates HTML at runtime. Let's take a look at HTML generated by GridView. To view HTML generated by GridView:

1) Run your website in browser.

2) Right click on the browser and select option view page source.

Style-GridView-With-Custom-CSS-CodingFusion

From the above image you can see GridView is transformed in HTML table during Runtime. This will help us to easily style our GridView control as we know now that GridView will convert into simple HTML table. 

So let's start  with creating simple HTML table and style it using CSS.

 

<table>
        <tr>
            <th scope="col">	
                Name
            </th>
            <th scope="col">
                Description
            </th>
            <th scope="col">
                Email
            </th>
            <th scope="col">
                Phone
            </th>
        </tr>
        <tr>
            <td>
                Max
            </td>
            <td>
                Hello my name is Max and I am software engineer.
            </td>
            <td>
                Demo@Gmail.com
            </td>
            <td>
                My Phone is 123456789
            </td>
        </tr>
        <tr>
            <td>
                Albert
            </td>
            <td>
                Hello my name is Albert and I am software engineer.
            </td>
            <td>
                Demo@Gmail.com
            </td>
            <td>
                My Phone is 123456789
            </td>
        </tr>
        <tr>
            <td>
                Destin
            </td>
            <td>
                Hello my name is Destin and I am software engineer.
            </td>
            <td>
                Demo@Gmail.com
            </td>
            <td>
                My Phone is 123456789
            </td>
        </tr>
        <tr>
            <td>
                Jessie
            </td>
            <td>
                Hello my name is Jessie and I am software engineer.
            </td>
            <td>
                Demo@Gmail.com
            </td>
            <td>
                My Phone is 123456789
            </td>
        </tr>
    </table>

 

Style-GridView-With-Custom-Css-CodingFusion

 

Output:

Lets create and apply some css to our table:

 


<style type="text/css">
        body
        {
            font: 12px verdana;
        }
        
        .myGridStyle
        {
            border-collapse:collapse;
            
        }
        
        .myGridStyle tr th
        {
            padding: 8px;
            color: white;
            border: 1px solid black;
        }
        
        
        .myGridStyle tr:nth-child(even)
        {
            background-color: #E1FFEF;
        }
        
        .myGridStyle tr:nth-child(odd)
        {
            background-color: #00C157;
        }
        
        .myGridStyle td
        {
            border:1px solid black;
            padding: 8px;
        }
        
        .myGridStyle tr:last-child td
        {
        }
    </style>

 

 

Output:

Now we are ready with our css Let's create gridview control.

 

<asp:GridView GridLines="None" runat="server" ID="grdTest">
    </asp:GridView>

 

 

Output:

style-gridview-with-custom-css-codingfusion

Lets apply CSS to our GridView control:

 

<asp:GridView GridLines="None" CssClass="myGridStyle" runat="server" ID="grdTest">
    </asp:GridView>

 

 

Output:

Style-GridView-with-custom-css-codingfusion

You can see how easily we have styled our GridView control using custom CSS.

Now let's apply paging to GridView:

 

 <asp:GridView AllowPaging="true" GridLines="None" PagerStyle-CssClass="paging" OnPageIndexChanging="grdTest_PageIndexChanging"
            PageSize="10" CssClass="myGridStyle" runat="server" ID="grdTest">
        </asp:GridView>

 

Syle-GridView-with-custom-css-codingfusion

Output: 

Style-GridView-with-custom-css-codingfusion

You can see in the above image that paging has also acquired the similar design like GridView.This is because it has inherited css from the main table generated by Gridview. The only problem with the paging is it has lost mousehover effect, selected tab effect. So we will write different css for our pager.

CSS for pager:

 

.paging
        {
        }
        
        .paging a
        {
            background-color: #00C157;
            padding: 5px 7px;
            text-decoration: none;
            border: 1px solid #00C157;
        }
        
        .paging a:hover
        {
            background-color: #E1FFEF;
            color: #00C157;
            border: 1px solid #00C157;
        }
        
        .paging span
        {
            background-color: #E1FFEF;
            padding: 5px 7px;
            color: #00C157;
            border: 1px solid #00C157;
        }
        
        tr.paging
        {
            background: none !important;
        }
        
        tr.paging tr
        {
            background: none !important;
        }
        tr.paging td
        {
            border: none;
        }

   

Applying paging css to gridview:

 

<asp:GridView AllowPaging="true" GridLines="None" PagerStyle-CssClass="paging"  PageSize="10" CssClass="myGridStyle" runat="server" ID="grdTest">
        </asp:GridView>

 Final Output :

Style-gridview-with-custom-css-codingfusion

 

You can see how easily we have styled GridView with custom CSS. Hope this article will help my fellow developer and designers. Kindly give your valuable feedback.

Thanks

Demo and Full Source Code

We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.
very nice .... exellent
3-Feb-2014 From  chetna
Thanks chetna.
9-Feb-2014 From  Anuj
Thanks ...
10-Mar-2014 From  Sajad
Hi this is very nice but it doesn't work on IE. any advice please how his code work with IE? thanks
28-Mar-2014 From  RR
Hi RR What problem you are facing in IE? Its Simple CSS nothing fancy.
6-Apr-2014 From  Anuj

Give your valuable comments.

Name
Email
Comment
6 + 5 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2017 CodingFusion