WebGrid.NET introduces several ways in maintaining the grid's appearance and styles. Generally, developer will enjoy using WebGrid.NET Designer to change the styles and create their own look&feel then save it to a layout file. The layout file can then be applied to other grid instances easily.

However, this technique doesn't seem to be preferred by web designers who want to control the styles of the grid in one single place and having the grid instances to share the same look&feel throughout the application. WebGrid.NET as well as other Intersoft's components share the same WebStyle class which allow you to use external CssClass instead of specifying the styles inline. All styles such as RowStyle, AlternateRowStyle are inherited from WebStyle thus exposing the CssClass property which you used to assign the CSS class name for that style

In this topic, you will learn the basic thing on how to control WebGrid's style using external CSS definition.

A few important notes to consider when using CssClass

You can't use inline styles together with CssClass. That means when you used CssClass, you should remove all other styles attributes.
The CSS class definition should be placed in the same page as the grid resides for the designer to render properly. You can use either <style> tag for page-level styles or use <link href=...> to link to external css stylesheet.

Following is the css class definitions sample which you can use in page-level (<style>) or insert it in an external linked css file:

HTML

Copy Code

Sample of CSS Class definitions 
.FrameStyle 
{
    background:#F1EFE2; 
}  

.GroupByBox 
{    
        background:#808080; 
}  

.GroupByBoxLabel 
{    
        background:#FFFFFF;   
        border-color:#000080;   
        border-width:1px;   
        border-style:solid;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;
}

.Header 
{    
        background:#ECE9D8;   
        border-color:#ACA899;   
        border-width:1px;   
        border-style:solid;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;   
        color:#000000;   
        border-top-color: white;    
        border-left-color: white;
}   

.AltRow 
{    
        background:#FAEBD7;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;   
        text-overflow: ellipsis;    
        overflow-x: hidden;
}   

.Row 
{    
        background:#FFFFFF;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;   
        text-overflow: ellipsis;    
        overflow-x: hidden;   
}

.GroupRow 
{    
        background:#F1EFE2;   
        border-color:#FFFFFF;   
        border-width:1px;   
        border-style:solid;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;   
        border-bottom-color: Silver;    
        border-right-color: Silver;
}   

.NewRow 
{    
        background:#FFFFFF;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;   
        color:#A9A9A9;
}

.StatusBar 
{    
        background:#ECE9D8;   
        border-color:#ACA899;   
        border-width:1px;   
        border-style:solid;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;    
        padding:2px ;
}  

.EditTextbox 
{    
        border-width:0px;   
        border-style:none;    
        font-family:Verdana;     
        font-size:8pt;     
        font-weight:normal;
}

Following is the modified LayoutSetting's styles which assign each style to appropriate class name. Note that all styles attributes is removed.

HTML

Copy Code

LayoutSettings declaration codes 
 
<NewRowStyle Cssclass=�?�NewRow�?�></NewRowstyle>
<EditTextboxStyle Cssclass=�?�EditTextBox�?�></EditTextboxstyle>
<alternatingRowStyle Cssclass=�?�AltRow�?�></AlternatingRowstyle>
<GroupRowInfoStyle Cssclass=�?�GroupRow�?�></GroupRowInfostyle>
<frameStyle Cssclass=�?�FrameStyle�?�></Framestyle>
<labelStyle Cssclass=�?�GroupByBoxLabel�?�></Labelstyle>      
         <style Cssclass=�?�GroupByBox�?�>      
         </style>
</GroupByBox>
<headerStyle Cssclass=�?�Header�?�></Headerstyle>
<RowStyle Cssclass=�?�Row�?�></Rowstyle>
<statusBarStyle Cssclass=�?�StatusBar�?�>
</StatusBarstyle>

Intersoft WebGrid Documentation
How-to: Control WebGrid's styles using external CSS definition
See Also Send comments on this topic.

A few important notes to consider when using CssClass

See Also