ASP.NET Core 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.