gridview paging in asp.net

ASP.NET provides a many for showing data and GridView Control is one of them. GridView control, used  for all CRUD operation display, edit and delete data from different kinds of data sources.

As Gridview is used to display huge amount of data.  To make the designing full and color full of your website and data, Microsoft provide designing property for grid view. 

There are few properties which help to make grid style.

·         FooterStyle

·          HeaderStyle

·         RowStyle

·         AlternatingRowStyle

·         PagerStyle

·          EmptyDataRowStyle

·         EditRowStyle

·         SelectedRowStyle

@Code Snippet for Grid View style in ASP.Net

<HeaderStyle Height="23px" BackColor="Chocolate" />

 <FooterStyle Height="20px" />

Height="20px" BackColor="LightGray"  />

<EditRowStyle Height="20px" HorizontalAlign="Left" BackColor="lightgray" />

<SelectedRowStyle Height="20px" BackColor="Azure" />

<AlternatingRowStyle Height="20px" BackColor="LightBlue" Width="100%" />

@Output will Display as

Another way to provide style

@CSS Code

<style type="text/css" >

        .mGrid

        {

            width: 100%;

            background-color: #fff;

            margin: 5px 0 10px 0;

            border: solid 1px #525252;

            border-collapse: collapse;

        }

        .mGrid td

        {

            padding: 2px;

            border: solid 1px #c1c1c1;

            color: #717171;

        }

        .mGrid th

        {

            padding: 4px 2px;

            color: #fff;

            background: #424242 url(grd_head.png) repeat-x top;

            border-left: solid 1px #525252;

            font-size: 0.9em;

        }

        .mGrid .alt

        {

            background: #fcfcfc url(grd_alt.png) repeat-x top;

        }

        .mGrid .pgr

        {

            background: #424242 url(grd_pgr.png) repeat-x top;

        }

        .mGrid .pgr table

        {

            margin: 5px 0;

        }

        .mGrid .pgr td

        {

            border-width: 0;

            padding: 0 6px;

            border-left: solid 1px #666;

            font-weight: bold;

            color: #fff;

            line-height: 12px;

        }

        .mGrid .pgr a

        {

            color: #666;

            text-decoration: none;

        }

        .mGrid .pgr a:hover

        {

            color: #000;

            text-decoration: none;

        }

    </style>

@ASP.Net HTML code where need to provide style to CSS

  <asp:GridView ID="GridView1" runat="server" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"

            PageSize="7" OnPageIndexChanging="GridView1_PageIndexChanging">

            <Columns>

                <asp:BoundField DataField="Name" HeaderText="Name" />

                <asp:BoundField DataField="Address" HeaderText="Address" />

                <asp:BoundField DataField="Phone" HeaderText="Date" />

            </Columns>

        </asp:GridView>