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.

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>
                [email protected]
            </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>
                [email protected]
            </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>
                [email protected]
            </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>
                [email protected]
            </td>
            <td>
                My Phone is 123456789
            </td>
        </tr>
    </table>

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:

Lets apply CSS to our GridView control:

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

Output:

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>

Output: 

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 :

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