WebDataGrid CSS styling guide

Alex Kartavov / Wednesday, August 25, 2010

Styling WebDataGrid

1. Css Classes applied from control level

1.        CssClass – applied to the grid’s frame.

2.       HeaderCaptionCssClass – applied to the header caption of every column.

3.       ItemCssClass – applied to every row.

4.        AltItemCssClass – applied to every even row.

5.       FooterCaptionCssClass – applied to the footer caption of every column.

2. Css Classes applied from column level


1.        Header-CssClass – applied to the column Header.

2.       CssClass – applied to every cell in the column.

3.       Footer-CssClass– applied to the column Footer

Note: The classes that are applied on the column level would overwrite those on the control level.

3. Css Classes applied from behavior levels

3.1. Activation

1.        ActiveCellCssClass – applied to the active cell.

2.        ActiveColumnCssClass – applied to the column’s header of the active cell.

3.       ActiveRowCssClass – applied to the row of the active cell.

4.       ActiveRowSelectorCssClass – applied to the RowSelector of the active cell.

5.       ActiveRowSelectorImageCssClass – applied to the image area of the RowSelector of the active cell.

3.2. Column fixing

1.       CellCssClass – applied to fixed column cells.

2.       FooterCssClass – applied to fixed column footers.

3.       HeaderCssClassapplied to fixed column headers.

4.       SeparatorCssClass – applied to the separator line that separates fixed columns from regular columns.


3.3. Column moving 


1.        TopDragIndicatorCssClass – applied to the top portion of the drop indicator.

2.       MiddleDragIndicatorCssClass applied to the middle portion of the drop indicator.

3.       BottomDragIndicatorCssClass – applied to the bottom portion of the drop indicator.

4.       DragMarkupCssClass – applied to the DragMarkup. If the default drag markup is used, this class will be applied in addition to the styles already applied to the header, if the drag markup is replaced only the DragMarkupCssClass will be used.

3.4. Column resizing 

1.       ResizeIndicatorCssClass applied to the resize indicator line


3.5. Editing 

1.        EditCellCssClass – applied to the cell that is being edited.

2.       AddNewRowCssClass – applied to the AddNewRow.

3.       AddNewRowSelectorImageCssClass applied to the image area of the RowSelector of the AddNewRow.

3.6. Filtering 

1.       EditCellCssClass – applied to the filter cell that is being edited.

2.       FilterButtonCssClass – applied to the filer button.

3.       FilteringCssClass – applied to the filter row.

4.       FilterRowSelectorImageCssClass – applied to the image area of the RowSelector of the filter row.

5.       FilterRuleDropDownCssClass – applied to the filter rule drop down.

6.       FilterRuleDropDownHoverItemCssClass – applied to the hovered item of the filter rule drop down.

7.       FilterRuleDropDownItemCssClass – applied to the items of the filter rule drop down.

8.       FilterRuleDropDownSelectedItemCssClass – applied to the selected item of the filter rule drop down.


3.7. Paging

1.       PagerCssClass – applied to the pager frame.

2.       CurrentPageLinkCssClass – applied to the current page index in the numeric mode.

3.       PageLinkCssClass – applied to pager’s index links other than the current one in the numeric mode.


 3.8. Row Selectors

1.       HeaderRowSelectorCssClass – applied to the row selector of the header row.

2.       FooterRowSelectorCssClass – applied to the row selector of the footer row.

3.       RowSelectorCssClass – applied to row selectors.


  3.8. Selection

1.       SelectedHeaderCssClass – applied to the column header when a column is selected

2.       SelectedCellCssClass – applied to the cell that is selected.

3.       SelectedRowSelectorCssClass – applied to the row selector when a row is selected.

4.       SelectedRowSelectorImageCssClass – applied to the row selector image when a row is selected.



Using CSS selectors

CSS classes are applied to every cell of WebDataGrid. So let’s imagine that we have a grid with a lot of records - this means that we have to apply one css class that many times. Doing so will significantly enlarge the HTML that needs to be rendered which inevitably lowers the performance. To avoid this, WebDataGrid uses CSS selectors.

For example, there is this default CSS class called igg_Item, which needs to be applied to every cell. Here is how it is done:

tbody.Igg_Item > tr > td
     /* style */


The same pattern should be used for applying custom CSS classes.

1. For any CSS class that targets cells in the body the CSS class should be written as following:
tbody.NewCellClass > tr > td

It is applicable to control level’s ItemCssClass property, and to the column fixing behavior's CellCssClass.
2.       For any other classes that target specific cells in the grid the selectors should be used as following:
tbody > tr > td.NewCellClass
It is applicable to the these properties:  

·         column level: CssClass

·         activation behavior: ActiveCellCssClass

·         selection behavior: SelectedCellCssClass

 3.       For any CSS class that targets a row the CSS class should be written as following:
tbody > tr.NewRowCssClass > td
It is applicable to the following:

·         control level:   AltItemCssClass

·         activation behavior: ActiveRowCssClass

The following code shows how to apply different styles to the grid cells.
<style type="text/css">
            text-align: center;
        tbody.NewItemClass > tr > td
            color: blue;
            text-align: center;
        tbody > tr.ActiveRowClass > td
            background-color: Red;
        tbody > tr > td.ColumnLevelCssClass
            text-decoration: underline;
        tbody > tr > td.SelectedCellClass
            font-weight: bold;
        tbody > tr > td.ActiveCellClass
            background-color: Yellow;

<ig:WebDataGrid runat="server" ID="wdgCustomers" DataSourceID="AccessDsCustomers"
        HeaderCaptionCssClass="HeaderCaptionClass" DataKeyFields="CustomerID" AutoGenerateColumns="false"
        Width="88%" ItemCssClass="NewItemClass" Height="400">
            <ig:BoundDataField CssClass="ColumnLevelCssClass" Key="Country" DataFieldName="Country"
                Header-Text="Country" />
            <ig:BoundDataField Key="City" DataFieldName="City" Header-Text="City" />
            <ig:BoundDataField Key="CompanyName" DataFieldName="CompanyName" Header-Text="Company" />
            <ig:BoundDataField Key="ContactName" DataFieldName="ContactName" Header-Text="Contact" />
            <ig:BoundDataField Key="Phone" DataFieldName="Phone" Header-Text="Phone"/>
            <ig:Activation ActiveCellCssClass="ActiveCellClass" ActiveRowCssClass="ActiveRowClass">
            <ig:Selection SelectedCellCssClass="SelectedCellClass">
    <asp:AccessDataSource ID="AccessDsCustomers" runat="server" DataFile="~/App_Data/Nwind.mdb"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Phone], [Country] FROM [Customers] ORDER BY [Country]">



·         The css classes with selectors are always taking priority and if the selectors are omitted in custom classes, the styling might look different from expected.

·         A potential side effect from css selectors may be that these styles will be applied to ALL td elements in the body (not only the first level td elements as with the angle bracket notation), including those in cell templates, so working with the selectors needs to be done carefully.

·         Internet Explorer 6 does not support selectors with angle bracket format (‘>’).  For applications that target IE6 the angle bracket must be omitted. Example:


tbody tr.NewRowCssClass td