StyleBasics
If you want to specify a style for each area of the grid, specify the CSS class name in the styleName property of the grid area.
The default styles are defined in the realgrid-style.css file in the provided package. In addition to the basic style, styles to be specified separately are defined and used in a separate file (ex: style.css) to suit the work style.
<link href="/public/styles/realgrid-style.css" rel="stylesheet" />
<link href="/public/styles/style.css" rel="stylesheet" />
//style.css content
.orange-color {
background: #ffff00
}
.blue-color {
background: #0000ff
}
.cursor {
cursor: crosshair;
}
...Column header style
Change the background color of the Investment Country column header
{
"name": "KorCountry",
"fieldName": "KorCountry",
"type": "data",
"width": "100",
"header": {
"text": "Investment country",
"styleName": "orange-color"
}
}Column Style
Change Phone Number column data cell background color
{
"name": "Phone",
"fieldName": "Phone",
"type": "data",
"width": "130",
"header": {
"text": "Phone number"
},
"styleName":"orange-color"
},Footer Style
Apply styles to column footers
gridView.setFooter({styleName:"orange-color"});Apply styles simultaneously
Apply Card Number column font color and cursor style
{
"name": "CardNumber",
"fieldName": "CardNumber",
"type": "data",
"width": "170",
"header": {
"text": "Card number"
},
"styleName": "blue-color cursor"
}Style callback
Dynamically set cell background color based on Gender value
{
"name": "Gender",
"fieldName": "Gender",
"type": "data",
"width": "55",
"header": {
"text": "Gender"
},
styleCallback: function(grid,dataCell){
var ret = {}
ret.styleName = "orange-color"
ret.editable = false;
ret.prefix = "<";
ret.suffix = ">";
if(dataCell.value == 'Mam'){
return ret;
}
}
}Properties available in style callbacks
- suffix -prefix -styleName -booleanFormat -numberFormat -datetimeFormat -textFormat
- renderer -editor -editable -readonly