CSS classes for the MultiRow control are as follows:
Class | Description | |
---|---|---|
.wj-cell.wj-header | Styles the header cells including column header, row header and top left cell. | |
.wj-multirow .wj-hdr-collapse | Styles the collapse column header icon displayed at the right edge of the last column header cell. | |
.wj-multirow .wj-hdr-collapse:hover | Styles the collapse column header icon when a user hovers the mouse over it. | |
.wj-cell | Styles all the cells in the MultiRow control. | |
.wj-cell.wj-alt | Styles the alternate rows in the MultiRow control. | |
.wj-multirow .wj-cell.wj-record-end:not(.wj-header) | Styles the line between each record. | |
.wj-multirow .wj-cell.wj-group-end | Styles the line between groups. | |
.wj-cell:not(.wj-hasdropdown) | Styles the overflow text in cell | |
Selection | ||
.wj-cells .wj-cell.wj-state-selected | Styles the currently selected cell in the MultiRow control. | |
.wj-cells .wj-cell.wj-state-multi-selected | Styles the currently multiple selected cell in the MultiRow control. | |
.wj-flexgrid .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-cell.wj-header.wj-state-multi-selected | Styles the selected cell headers when the showSelectedHeaders or/and showSelectedHeaders property is set to true. | |
.wj-flexgrid .wj-colheaders .wj-header.wj-state-multi-selected | Styles the selected column headers when the showSelectedHeaders property is set to true. | |
.wj-flexgrid .wj-colheaders .wj-header.wj-state-multi-selected | Styles the selected row headers when the showSelectedHeaders property is set to true. | |
Editing | ||
.wj-flexgrid .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. | |
Freezing | ||
.wj-frozen | Styles non-header frozen cells. | |
.wj-cell.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-cell.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-cell.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-grouppanel .wj-groupmarker | Styles the div element for each grouped column displayed in the GroupPanel control. | |
.wj-grouppanel .wj-groupmarker .wj-remove | Styles the (x) mark displayed in the group panel for each column header element. | |
.wj-glyph-drag | Styles the drag icon for each grouped column displayed in the GroupPanel control. | |
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 Condition Filter. | |
Filtering | ||
.wj-cell.input-validation-error | Styles the cell editor with invalid input value. | |
.wj-cell.wj-state-invalid | Styles the cells with invalid value. |