RealGrid2 Guide
Cell components
changing screen display values

Changing screen display values

RealGrid provides several functions that can change the values displayed on the screen regardless of the actual data value. This function only changes the values displayed on the screen, not the actual data values.

※ You should not perform time-consuming operations or value-changing operations such as setValue() inside displayCallback.

  1. Change using regular expressions
  2. Change using displayCallback
  3. Change using lookupDisplay, which can change the code value to a label value and display it.

This demo only explains steps 1 and 2. Please refer to the link below for the lookupDisplay function.

Regular expression expression

var columns = [
   ...
{
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "150",
   "header": {
     "text": "regular expression",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "editMask": "0000-0000-0000-0000"
     }
   },
   "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2- $3-$4"
}
   ...
];
 
gridView.setColumns(columns);

displayCallback

var columns = [
   ...
{
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "150",
   "header": {
     "text": "regular expression",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "editMask": "0000-0000-0000-0000"
     }
   },
   "displayCallback": function(grid, index, value) {
     var tmp = '';
     tmp += value.substr(0, 4);
     tmp += '-';
     tmp += value.substr(4, 4);
     tmp += '-****-****';
 
     return tmp;
   }
}
   ...
];
 
gridView.setColumns(columns);
lookup treegroupheader tooltip