# Styling and CSS

## Content



CSS Classes for FlexGrid control are as follows:

|   **Class**   |   **Description**   |
| --- | --- |
|   .wj-flexgrid   |   Styles the div host element of the FlexGrid control.   |
|   .wj-topleft .wj-cell   |   Styles the TopLeft corner cell/cells.   |
|   .wj-colheaders .wj-cell   |   Styles all the column header cells.   |
|   .wj-rowheaders .wj-cell   |   Styles all the row header cells.   |
|   .wj-header   |   Styles the header cells including column header, row header and top left cell.   |
|   .wj-row .wj-cell   |   Styles all the rows in grid.   |
|   .wj-alt   |   Styles the alternative rows in grid.   |
|   .wj-cells .wj-cell   |   Styles all the cells in the scrollable area (data cells).   |
|   .wj-cell   |   Styles all the cells in grid including column header, row header and top left cell.   |
|   .wj-bottomleft .wj-cell   |   Styles the div element containing cells collection for bottom left area.   |
|   .wj-colfooters .wj-cell   |   Styles the div element containing cells collection for column footers.   |
|   .wj-align-right   |   Styles the right aligned columns.   |
|   .wj-align-center   |   Styles the center aligned columns.   |
|   **Selection**   |  |
|   .wj-state-selected   |   Styles the active cell and currently selected item in the drop down list.   |
|   .wj-state-multi-selected   |   Styles all the cells in the selected cell range except the active cell.   |
|   .wj-marquee   | Styles the Excel-style element that highlights the selection when the showMarquee property is set to true. |
|   .wj-state-active   |   Styles the active cell.   |
|   .wj-colheaders .wj-state-multi-selected   |   Styles the selected column headers when the [showSelectedHeaders](https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html/#showSelectedHeaders) property is set to true.   |
|   .wj-rowheaders .wj-state-multi-selected   |   Styles the selected row headers when the [showSelectedHeaders](https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html/#showSelectedHeaders) property is set to true.   |
|   **Editing**   |  |
|   .wj-grid-editor   |   Styles the cell editor element.   |
|   .wj-glyph-pencil   |   Styles the pencil icon displayed in the row header of the currently editing row.   |
|   .wj-glyph-asterisk   |   Styles the asterisk icon displayed in the row header of the new row template.   |
|   **Validation**   |  |
|   .wj-state-invalid   |   Styles the invalid cells.   |
|   **Freezing**   |  |
|   .wj-frozen   |   Styles non-header frozen cells.   |
|   .wj-frozen-row   |   Styles cells in the last frozen row. This style can be used to create a horizontal divider line between the frozen and scrollable rows.   |
|   .wj-frozen-col   |   Styles cells in the last frozen column. This style can be used to create a vertical divider line between the frozen and scrollable columns.   |
|   **Sorting**   |  |
|   .wj-glyph-up   |   Styles the up-arrow icon displayed in the column header of a column sorted in ascending order.   |
|   .wj-glyph-down   |   Styles the down-arrow icon displayed in the column header of a column sorted in descending order.   |
|   **Grouping**   |  |
|   .wj-group   |   Styles the group row.   |
|   .wj-glyph-down-right   |   Styles the expand icon displayed in the group row for the expanded group.   |
|   .wj-glyph-right   |   Styles the collapse icon displayed in the group row for the collapsed group.   |
|   .wj-grouppanel   |   Styles the div host element for GroupPanel control.   |
|   .wj-groupmarker   |   Styles the div element for each grouped column displayed in the GroupPanel control.   |
|   .wj-remove   |   Styles the (x) mark displayed in the group panel for each column header element.   |
|   **Filtering**   |  |
|   .wj-glyph-filter   |   Styles the filter icon displayed in column headers.   |
|   .wj-filter-on   |   Styles the filter icon when the column has been filtered.   |
|   .wj-filter-off   |   Styles the filter icon when the column has not been filtered.   |
|   .wj-columnfiltereditor   |   Styles the div host element for FilerDialog.   |
|   .wj-valuefilter-editor   |   Styles the div host element for Value Filter.   |
|   .wj-conditionfilter-editor   |   Styles the div host element for Condtion Filter.   |
|   **Drag Drop**   |  |
|   .wj-marker   |   Styles the marker displayed in the row/column header of the row/column where the dragged row/column will be dropped.   |
|   .wj-state-dragsrc   |   Styles the target row/column which is being dragged.   |
|   **RowDetail**   |  |
|   .wj-glyph-plus   |   Styles the Plus icon displayed in the row headers of the collapsed detail row.   |
|   .wj-glyph-minus   |   Styles the Minus icon displayed in the row headers for the expanded detail row.   |