Skip to main content

GridView Design Using CSS

 Create Css File in your Project...And Add Reference to Grid View page
* {
    padding: 0;
    margin: 0;
}
body {
    font: 11px Tahoma;
    background-color: #F7F7E9;
}
h1 {
    font: bold 32px Times;
    color: #666;
    text-align: center;
    padding: 20px 0;   
}
#container {
    width: 700px;
    margin: 10px auto;
}

.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;
}

Grid View Page......In This Page have to call CssClass="mGrid" in GridView Contro..
Eg...
<div id="container">
        <h1>ASP.NET GridView makeover using CSS</h1>
   
        <asp:GridView ID="gvCustomres" runat="server"
            DataSourceID="customresDataSource"
            AutoGenerateColumns="False"
            GridLines="None"
            AllowPaging="true"
            CssClass="mGrid"
            PagerStyle-CssClass="pgr"
            AlternatingRowStyle-CssClass="alt">
            <Columns>

           BIND THE DATA HERE
          </Columns>
         </GridView>




Save it Above image to Css folder...Give the name grd_alt.png ,grd_head.png, and grd_pgr.png

Labels:

Comments

Post a Comment

Popular posts from this blog

SQL Query :- Create Tables,Primary key,Foreign key,Merge Statment

SQL Query 1)    Using CASE Statement : - To Check the Particular column ISNULL              CASE WHEN ISNULL ([Col_Name], ' ') = ' ' THEN 'Others'                       ELSE [Col_Name] END AS [Col_Name] 2)    Convert Data format into VARCHAR and save 10/18/2012 this Format and also check if Date Column is Empty or not.                 CONVERT (VARCHAR,[Col_CreatedDt], 101) AS CreatedDt                        , CASE WHEN ISNULL ([Col_ModifiedDt], ' ') = ' ' THEN ' not available'                        ELSE CONVERT (VARCHAR, [ Col_ModifiedDt], 101) END AS ModifiedDt 3)    Casting  and Check Date Difference               CAST (Col_Name or ParameterName AS VARCHAR)               DATEDIFF(HOUR,Col_Date, GETDATE())<=24 4)    Create two table and set Primary key and Foreign Key             Create Table Exams            (                 exam_id int primary key,                 exam_name varchar(50),            );    
Post a Comment
Read more

AngularJS

What is AngularJS? AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.3. Definition of AngularJS as put by its  official documentation  is as follows − AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology. Features AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA). AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way. Application written in AngularJS is c
1 comment
Read more