user style
The style of RealGrid2 can be changed to the style you want by directly editing the CSS file. In order to change the style, it is important to know which style class is applied to each area of RealGrid2.
Although the style classes described in this guide are not all of RealGrid2's style classes, we have written class names and usage examples for important areas that make up the grid.
Main class name
- Body Area
- rg-root, rg-grid, rg-table -rg-body -rg-hscrollbar rg-vscrollbar
- Around area such as header, footer, status bar, etc.
- rg-head, rg-header -rg-sum
- rg-foot, rg-footer
- rg-rowindicator -rg-statebar
- rg-checkbar, rg-checkbox, rg-radio
- cell, data area
-rg-button
-rg-fixed
-rg-rowgroup
-rg-focus
- rg-selection
- Edit area
-rg-editor-*
-rg-form-*
-rg-dropdown-*
- rg-multicheck, rg-multicheck-*
- rg-calendar, rg-cal-*
- Other areas
-rg-popup-menu
-rg-group-panel
-rg-waiting
- rg-filter -rg-tooltip -rg-toast
- rg-progress -rg-validation-*
- Renderer
-rg-bar-renderer
- rg-image-renderer -rg-icon-renderer
- rg-check-renderer
- rg-button-renderer -rg-link-renderer -rg-shape-renderer -rg-signalbar-renderer
- rg-spark*-renderer
- rg-code*-renderer
- Tree area
- rg-tree
Comment out the default style file in the index.html file
All demo grids in this guide are explained by removing the 'default style file' and adding the styles to a new CSS file. Therefore, to better understand the demo, refer to the contents of the CSS file using the View Source Code button attached to the bottom of the demo grid.
<!-- RealGrid -->
<!-- <link href="/public/realgrid.2.0.2/realgrid-style.css" rel="stylesheet" /> -->
<script src="/public/realgrid.2.0.2/realgrid-lic.js"></script>
<script src="/public/realgrid.2.0.2/realgrid.2.0.2.min.js"></script>