WebDataGrid CSS styling guide

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.       HeaderCssClass – applied 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:

 

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

·         column level: CssClass

·         activation behavior: ActiveCellCssClass

·         selection behavior: SelectedCellCssClass

·         control level:   AltItemCssClass

·         activation behavior: ActiveRowCssClass

 

·         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