Change grid style

RealGrid2 style, unlike previous versions of RealGrid, provides styles in almost all areas in the form of classes according to the rules of CSS (opens in a new tab), a standard style sheet language.

Default style

Default styles are defined in the realgrid-style.css file included in the RealGrid2 package. If there is no style file, the grid will not be displayed properly as shown in the demo screen below.

Grid with style files removed

Let's comment out the style file like the code below.

<!-- 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>

Grid with style file applied

This time, let's uncomment the style file and apply the default style.

<!-- 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>

theme

In addition to the basic styles, the RealGrid2 package also includes style files that allow you to apply various themes. For information about themes, see Theme Guide.