Style
Column Dynamic Style
Column dynamic style applies style based on value only to columns with styleCallback specified.
<RGDataColumn
name={"Age"}
fieldName={"Age"}
header={{text:"NUMBER"}}
editor={{type:"number"}}
width={200}
styleCallback={
function(grid, cell){
return {style: {background: "#ff00ff"}}
}
}
/>Applying dynamic styles to columns using js
const onInitialized = (grid: RealGrid.GridView) => {
//column dynamic style
grid.columnByName("Age").styleCallback = function(grid, cell){
return {style: {background: "#ff0000"}}
}
}Row dynamic styles
Row dynamic styles are used when you want to apply styles to the entire row based on a specific value.
<RealGridReact
ref={gridView}
onInitialized={onInitialized}
rowStyleCallback={function(grid, item, fixed) {
const ret = {styleName: ""};
ret.styleName = "blue-color"
return ret
}}
/>Applying dynamic row styles using js
const onInitialized = (grid: RealGrid.GridView) => {
grid.setRowStyleCallback(function(grid, item, fixed) {
const ret = {styleName: ""};
ret.styleName = "blue-color"
return ret
})
}Cell dynamic styles
Cell dynamic styles are used when you want to apply styles to individual cells.
<RealGridReact
ref={gridView}
onInitialized={onInitialized}
cellStyleCallback={function(grid, dataCell){
var ret = {styleName: ""}
ret.styleName = "blue-color"
return ret;
}}
/>Applying dynamic style to cells using js method
const onInitialized = (grid: RealGrid.GridView) => {
grid.setCellStyleCallback(function(grid, dataCell) {
var ret = {styleName: ""}
ret.styleName = "blue-color"
return ret;
})
}