CSS

Grid classes

Some features have classes added to allow to customize the styles.

Header menu

For the header cells configured with menu will have the class has-menu that will help to make some customized styles.
By default the style applied will hide the menu icon when cursor is not hovering the column, only displaying on hover the column and change icon opacity on hover it.

HTML structure:

<div class="wj-cell wj-header wj-header-alt has-menu group-header wj-filter-off">
    <div>
        ColumnName
        <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
            <span class="wj-glyph-filter">
                ::before
            </span>
        </button>
    </div>
</div>

ColumnName

CSS applied:

// WijmoCSS.css
.wj-flexgrid .wj-cell.wj-filter-off .wj-elem-filter {
    opacity: .5;
}

// GridContainer.css
.wj-glyph-filter:before { /* Filter icon changed to menu icon */
    content: "\f0b0";
}

.wj-filter-off.wj-header .wj-elem-filter { /* Hide column menu icon */
    display: none;
}

.has-menu.wj-header:hover .wj-elem-filter { /* Show the column menu icon on hover the column */
    display: inline-block;
}

Header alignment

To have columns aligned on the header, the styles were customized when have more than one rows on the header. If needed some customization of that type, the styles can be overwritten using that as base CSS.

HTML structure for header with a single row, no group, no customization needed:

<div class="wj-colheaders">
    <div class="wj-row">
        <div class="wj-cell wj-header has-menu wj-filter-off">
            <div>
                ColumnName1
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
        <div class="wj-cell wj-header has-menu wj-filter-off">
            <div>
                ColumnName2
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
        <div class="wj-cell wj-header has-menu wj-filter-off">
            <div>
                ColumnName3
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
    </div>
</div>

ColumnName1

ColumnName2

ColumnName3

CSS applied:

/* Align filter icon to bottom */
.group-header.wj-cell.wj-header.has-menu.wj-filter-off .wj-btn.wj-btn-glyph.wj-right,
.group-header.wj-cell.wj-header.has-menu.wj-filter-on .wj-btn.wj-btn-glyph.wj-right {
    top: auto;
}

/* Align column text to bottom */
.wj-flexgrid .wj-cell.wj-header {
    display: table;
    table-layout: fixed;
}

.wj-flexgrid .wj-cell.wj-header div {
    display: table-cell;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: bottom;
    width: 100%;
}

.wj-cell.wj-header div:not(:first-child) {
    text-align: center;
}

.wj-cell.wj-header.is-select {
    padding: 0;
}

/* On hover column reduce sort icon opacity */
.wj-flexgrid .wj-cell.wj-filter-on:hover .wj-glyph-up,
.wj-flexgrid .wj-cell.wj-filter-off:hover .wj-glyph-up,
.wj-flexgrid .wj-cell.wj-filter-on:hover .wj-glyph-down,
.wj-flexgrid .wj-cell.wj-filter-off:hover .wj-glyph-down {
    opacity: .2;
    pointer-events: none;
}

/* Place the sort icon closer to the column text in case there is no filter applied */
.wj-flexgrid .wj-cell .wj-glyph-up,
.wj-flexgrid .wj-cell .wj-glyph-down {
    bottom: 10px;
    position: absolute;
    right: 10px;
    top: auto;
}

/* Place the sort icon closer to the column text in case the filter is applied */
.wj-flexgrid .wj-cell.has-menu .wj-glyph-up,
.wj-flexgrid .wj-cell.has-menu .wj-glyph-down {
    right: 22px;
}

/* Have more padding right when have some sorting applied */
.wj-cell.wj-header.wj-sort-asc div,
.wj-cell.wj-header.wj-sort-desc div {
    padding-right: 0;
}

/* Have more padding right when have some sorting applied having filter menu */
.wj-cell.wj-header.wj-sort-asc.has-menu div,
.wj-cell.wj-header.wj-sort-desc.has-menu div {
    padding-right: 8px;
}

/* Checkbox selection and group alignment */
.wj-cell.wj-header.is-select div,
.wj-cell.wj-header div.is-group {
    text-align: center;
}

/* Column text for the grouped columns */
.wj-cell.wj-header div {
    display: inline-block;
}

HTML structure for header with a multiple rows, having groups:

<div class="wj-colheaders">
    <div class="wj-row">
        <div class="wj-cell wj-header has-menu group-header wj-filter-off">
            <div>
                <input class="select-all" type="checkbox">
            </div>
        </div>
        <div class="wj-cell wj-header has-menu group-header wj-align-right">
            <div class="is-group">
                 ColumnGroupName
            </div>
        </div>
        <div class="wj-cell wj-header has-menu group-header wj-align-center">
            <div class="is-group">
                ColumnGroupName
            </div>
        </div>
        <div class="wj-cell wj-header wj-align-center has-menu group-header wj-filter-off">
            <div>
                ColumnName3
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="wj-row">
        <div class="wj-cell wj-header wj-header-alt wj-align-center has-menu group-header wj-filter-off">
            <div>
                ColumnName1
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
        <div class="wj-cell wj-header wj-header-alt wj-align-center has-menu group-header wj-filter-off">
            <div>
                ColumnName2
                <button class="wj-btn wj-btn-glyph wj-right wj-elem-filter" type="button">
                    <span class="wj-glyph-filter"></span>
                </button>
            </div>
        </div>
    </div>
</div>

ColumnGroupName

ColumnName3

ColumnName1

ColumnName2

CSS applied:

// GridContainer.css
/* Group left aligned */
.wj-cell.wj-header.wj-align-left div.is-group {
    text-align: left;
}

/* Group right aligned */
.wj-cell.wj-header.wj-align-right div.is-group {
    text-align: right;
}

/* Column text for the grouped columns */
.wj-cell.wj-header div {
    display: inline-block;
}

Cells single selection colors

When multiple cells are selected, but have a single range selection, the color for cells should have a different color to be perceptible when a cell is selected and can be changed using the specified CSS aplied.
Checked rows have the class wj-checked, the selected rows have the class wj-state-multi-selected and the current selected row has the class wj-state-selected.

HTML structure for header with a multiple rows, having groups:

55042180LL

¥2

€12,456,789.10

55042180LL

¥2

€12,456,789.10

55042180LL

¥2

€12,456,789.10

55042180LL

¥12

€12,456,789.10

CSS applied:

// GridContainer.css
/* Checked rows */
.wj-row.wj-checked .wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: #80adbf;
    color: #fff;
}

/* Selected rows */
.wj-cell.wj-state-multi-selected {
    background: rgba(128, 173, 191, 0.67);
    color: #fff;
}

/* Selected checked rows */
.wj-row.wj-checked .wj-cell.wj-state-multi-selected {
    background: rgba(128, 173, 191, 0.84);
    color: #fff;
}

/* Individual selection on checked rows */
.wj-row.wj-checked .wj-cell {
    background: rgba(0, 133, 199, 0.9);
}

Cells multi-range selection colors

When have multiple cells selected having multi-range selection, a different class will be applied, so if needed it may allow to set a different style.
Multi-range selected rows have the class extended-selection, similar to what happens with the single selection cells, the style of the checked rows (wj-checked) can have a different style as well as the current selected row, which has the class wj-state-selected.

HTML structure for header with a multiple rows, having groups:

55042180LL

¥2

€12,456,789.10

55042180LL

¥2

€12,456,789.10

55042180LL

¥2

€12,456,789.10

55042180LL

¥12

€12,456,789.10

CSS applied:

// GridContainer.css
/* Multi-range selection */
.extended-selection.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: rgba(128, 173, 191, 0.67);
    color: #fff;
}

/* Multi-range Selected checked rows */
.wj-row.wj-checked .extended-selection.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: rgba(128, 173, 191, 0.84);
    color: #fff;
}

/* Links color when selected */
.extended-selection a,
.extended-selection a:link,
.extended-selection a:visited {
    color: #fff;
}

Invalid cells

Cells having an error message have the class wj-state-invalid and show the error message on cursor hover.

55042180LL

¥22

€12,456,789.10

55042180LL0

¥2

€2,456,789.10

CSS applied:

WijmoCSS.css
.wj-cell.wj-state-invalid {
    border: 1.2px solid red;
}

.wj-cell.wj-state-invalid:not(.wj-header):after {
    position: absolute;
    content: '';
    width: 0;
    right: 0;
    top: -6px;
    border: 6px solid transparent;
    border-right-color: red;
}

Dirty cells

Cells that were changed have the class cell-dirty which identifies that that cell has changes to send to the server.
The following example shows how the dirty state looks in cells having different styles.

55042180LL

¥22

€12,456,789.10

55042180LL0

¥2

€2,456,789.10

CSS applied:

// GridContainer.css
/* Cells that were edited */
.wj-cell.cell-dirty:before {
    border: 5px solid transparent;
    border-left-color: rgba(255, 0, 0, 0.4);
    border-top-color: rgba(255, 0, 0, 0.5);
    content: "";
    left: 0;
    position: absolute;
    top: 0;
}

Overlays

There are two types of overlays, the loading and empty state, and each has its class to be possible to be customized. Both share the same structure, only differs from the message displayed and the specific class.

Could be used the class loading to apply some customizations for that mode.

HTML structure:

<div class="OverlayWrapper visible loading">
    <div class="Overlay">
        <div class="OverlayTxt OSInline">
            Loading ...
        </div>
    </div>
</div>

55042180LL

¥2

€12,456,789.10

55042180LL

¥2

€12,456,789.10

55042180LL

¥12

€12,456,789.10

55042180LL

¥-2

€12,456,789.10

ColumnName1

ColumnName2

ColumnName3

Loading ...

CSS applied:

// GridContainer.css
.GridWrapper {
    position: relative;
}

.OverlayWrapper { /* Overlay message on the grid (Loading, Empty records ...) */
    background-color: rgba(255,255,255,.5);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.OverlayWrapper.visible {
    display: block;
}

.OverlayWrapper .Overlay {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.OverlayWrapper .OverlayTxt {
    background-color: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.7);
    border-radius: 5px;
    padding: 8px;
}

Empty state

A margin top is applied to the empty state overlay to allow the users have access to the header and group options, since the empty state could be result of a filter applied, be on a grouped column or not. Could be used the empty class to apply some customizations for that state.

HTML structure :

<div class="OverlayWrapper visible empty" style="margin-top: 123px;">
    <div class="Overlay">
        <div class="OverlayTxt OSInline">
            No results to show
        </div>
    </div>
</div>

ColumnName1

ColumnName2

ColumnName3

No results to show

CSS applied and relevant to the feature:

// GridContainer.css
/* When have no groups, the groups element will still be rendered but not visible to the user, to can mark out the distance to the cells */
.wj-grouppanel.hidden {
    height: 0;
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.GridWrapper {
    position: relative;
}

.OverlayWrapper { /* Overlay message on the grid (Loading, Empty records ...) */
    background-color: rgba(255,255,255,.5);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.OverlayWrapper.visible {
    display: block;
}

.OverlayWrapper .Overlay {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.OverlayWrapper .OverlayTxt {
    background-color: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.7);
    border-radius: 5px;
    padding: 8px;
}