ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Styling and CSS
In This Topic
    Styling and CSS
    In This Topic
    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.