Working with Controls / FlexGrid / Work with FlexGrid / Styling and CSS
Styling and CSS
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 property is set to true.
.wj-rowheaders .wj-state-multi-selected Styles the selected row headers when the 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.