GridView custom CSS style and text alignment example in ASP.NET

07:37:00  , ,  No comments

GridView custom CSS style


Gridview display the database values on GridView Row but we want to custom style add the css for Gridview row,header,paging like below example using asp.net.

                                    DEMO

                     
                           
   CSS 
.SGrid {
    width:auto;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #ff006e;
    border-collapse:collapse;
}

.SGrid th {
    padding: 4px 2px;
    color: #fff;
    background:#f17c7c;
    border-left: solid 1px #ff006e;
    font-size: 0.9em;
    text-align:center !important;
}
.SGrid td {
    padding: 2px;
    border: solid 1px #ff006e;
    color: #717171;
    text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
    border-width: 0;
    padding: 0 6px;
    border-left: solid 1px #f17c7c;
    font-weight: bold;
    color: #f17c7c;
    line-height: 12px;
    background:#fff;
     text-align:center !important;
 }  
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }


  HTML CODING


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

     /*GRIDVIEW STYLISH*/ 

        .SGrid {
    width:auto;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #ff006e;
    border-collapse:collapse;
}

.SGrid th {
    padding: 4px 2px;
    color: #fff;
    background:#f17c7c;
    border-left: solid 1px #ff006e;
    font-size: 0.9em;
    text-align:center !important;
}
.SGrid td {
    padding: 2px;
    border: solid 1px #ff006e;
    color: #717171;
    text-align:center !important;
}
.SGrid .alt { background: #cec4c4 ; }
.SGrid .pgr { background: #424242 ; }
.SGrid .pgr table { margin: 5px 0; }
.SGrid .pgr td {
    border-width: 0;
    padding: 0 6px;
    border-left: solid 1px #f17c7c;
    font-weight: bold;
    color: #f17c7c;
    line-height: 12px;
    background:#fff;
     text-align:center !important;
 }  
.SGrid .pgr a { color:#424242; text-decoration: none; }
.SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }

 /*GRIDVIEW STYLISH*/
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid"

            runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" PageSize="3">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Username" HeaderText="Username" SortExpression="Username" />
                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbcon %>" SelectCommand="SELECT * FROM [register]"></asp:SqlDataSource>
    </div>
    </form>
</body>

</html>



Add - New Webform - Write Css Styles  for Gridview Row,Header,Pager 





Next - Add pager Custom Css and call the CSS Class for Gridview alt,SGrid,pgr





Below Like After Added Custom css Show the Gridview Text Align Center



0 comments:

Post a Comment