RealGrid2 Guide
Style & Theme
Column dynamic style

Column dynamic style

Column dynamic style applies the style according to the value only to the column for which styleCallback is specified.

※ You must not perform operations that take a long time or change values, such as setValue(), within styleCallback.

Reference to own column cell value

Displayed in orange when the value is “M”.

var columns = [
   ...skip...
   {
     name: "Gender",
     fieldName: "Gender",
     width: "55",
     header: {
       text: "Gender",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {}
 
       if(dataCell.value == 'Mam'){
         ret.styleName = "orange-column" // ret.style = {background:"#ffff00"} Style can be applied directly
       }
 
       return ret;
     }
   },
   ...skip...
];
 
gridView.setColumns(columns);

References other column cell values

If the value of the gender column is "Male" and the value of the age column is 60 to 70, it will be orange and cannot be edited.

var columns = [
   ...skip...
   {
     name: "Age",
     fieldName: "Age",
     width: "55",
     header: {
       text: "Age",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {}
       var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
 
       if( (gender == 'Male') && (dataCell.value >= 50 && dataCell.value <= 60)){
         ret.styleName = "orange-column";
         ret.editable = false;
       }
 
       return ret;
     }
   },
   ...skip...
];
 
gridView.setColumns(columns);

Dynamically applied in check renderer

New rows can be checked, and existing rows cannot be checked.

var columns = [
   ...skip...
   {
     name: "Bool2",
     fieldName: "Bool2",
     width: "60",
     editable: false,
     renderer: {
       type: "check",
       trueValues: "Y,y,YES,yes",
       falseValues: "N,n,NO,no"
     },
     header: {
       text: "check",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {};
     
       ret.renderer = {
         type: "check",
         trueValues: "Y,y,YES,yes",
         falseValues: "N,n,NO,no",
         editable: dataCell.item.itemState == "appending" || dataCell.item.rowState == "created"
       }
 
       return ret;
     }
   },
   ...skip...
];
 
gridView.setColumns(columns);
styleName property and callbackRow dynamic style