Thursday, 20 March 2014

gridview paging in

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" >
            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;

@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">
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="Address" HeaderText="Address" />
                <asp:BoundField DataField="Phone" HeaderText="Date" />

No comments:

Post a Comment