RealGrid2 Guide
Style & Theme
Cell, data area styles

Cell, data area

This page explains the ‘Cell, Data’ area among the style area divisions.

Please refer to the links below for explanations of other areas.

rg-button-*

Styles for the action and popup types of Cell Button and the calendar popup button in the Date Editor and You can change the style of buttons that expand the list in Dropdown Editor.

This style includes a button image in base64 format, and you can change the image or use the style attribute to decorate the button's style.

.rg-button-action {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}
 
.rg-button-popup {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}
 
.rg-button-list {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}
 
.rg-button-calendar {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}

rg-fixed-*

The rg-fixed-* style classes have fixed rows and Used to specify the style of cells or dividers in a column.

The demo below is an example of changing the cell color of fixed rows and columns.

.rg-fixed-row {
   /* Change cell color of fixed rows and columns */
   background: #0000ff;
}
 
.rg-fixed-row td {
   border-top: none;
   border-right: 1px solid #bdbdbd;
   border-bottom: 1px solid #bdbdbd;
   border-left: none;
   height: 0;
}

rg-rowgroup-*, rg-group-panel-*

Row Grouping can add several areas that differ from the default grid style. Representative examples include ‘group panel’, ‘group header’, ‘group footer’, and ‘group bar’. Classes starting with rg-rowgroup-* and rg-group-panel-* specify styles for this area.

The demo below is an example of changing the color of the group panel and group header area.

The row group header can be given a separate class with the level numbered depending on the level, but this is not defined in the default style.

.rg-rowgroup-header-level-2 {
   /* Change row group 2-level header color */
   background-color: #00f;
}
 
/* ... */
 
.rg-group-panel {
   box-sizing: border-box;
   /* Change group panel color */
   background: #0000ff;
   border-bottom: 1px solid #bcc0c8;
   text-align: left;
}

rg-fosucs-*, rg-selection-*

You can also customize the style of focus and selection areas. Since the style of the selection area must be the highest style among the styles of other body areas, it is recommended to apply the !important rule.

The demo below is an example of changing the color of the focus cell and selection area.

.rg-focus {
   /* Change the color of the focus cell */
   border: 2px solid #00f;
}
 
/* ... */
 
.rg-selection-cell {
   /* Change color of selected area */
   background: #0000ff40 !important;
   color:inherit;
}
 
.rg-selection {
   background: rgba(229, 102, 21, 0.2) !important;
   border: 1px solid rgba(229, 102, 21, 0.67);
}
Header, footer, status bar stylesEdit area styles