RealGrid2 Guide
Renderer
Text Renderer

Text Renderer

TextCellRenderer is RealGrid's basic data cell renderer. The value to be displayed in the cell is displayed as text using the style values set in the column without any additional properties.

To specify a style for the text cell renderer, simply specify the CSS style name in the column's styleName property.

Styling

  1. Set the text color of the phone number column to blue.
  2. Text in the product number column is treated as BOLD.
  3. Set the font color of the investment country column to blue and process it as BOLD.
//css
.rgsample-blue-column {
     color: blue;
}
 
.rgsample-bold-column {
     font-weight: bold;
}
 
//js
var columns = [
   ... skip ...
   {
     name: "Phone",
     fieldName: "Phone",
     width: "100",
     styleName: "rgsample-blue-column",
     header: {
       text: "Phone number",
       styleName: "orange-column"
     }
   },
   {
     name: "ProductId",
     fieldName: "ProductId",
     width: "120",
     styleName: "rgsample-bold-column",
     header: {
       text: "Product number",
       styleName: "orange-column"
     }
   },
   {
     name: "KorCountry",
     fieldName: "KorCountry",
     width: "100",
     styleName: "rgsample-blue-column rgsample-bold-column",
     header: {
       text: "Investment country",
       styleName: "orange-column"
     }
   },
   ... skip ...
];
 
gridView.setColumns(columns);

Specify Number Format

In Number Format, '0' means a fixed digit. '#' means variable digits.
For example, in the case of '#,##0.###', if the number to be displayed is an integer, only the integer will be displayed.

In case of '#,##0.###' 100 -> 100 10000 -> 10,000 100.1 -> 100.1 1000.12 -> 1,000.12 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

In case of '#,##0.000' 100 -> 100.000 10000 -> 10,000.000 100.1 -> 100.100 1000.12 -> 1,000.120 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

In case of '#,##0.0##' 100 -> 100.0 10000 -> 10,000.0 100.1 -> 100.1 1000.12 -> 1,000.12 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

  1. The interest rate column is expressed up to 2 fixed decimal places.
  2. The payment column is indicated in thousand units with , followed by $.
  3. The maturity amount column is indicated in thousand units with ,, 3 fixed decimal places, and $ in front.
//css
.right-column {
   text-align: right;
}
 
//js
var columns = [
   ... skip ...
   {
     name: "InterestRate",
     fieldName: "InterestRate",
     width: "50",
     numberFormat: "0.00",
     header: {
       text: "interest rate",
       styleName: "orange-column"
     },
     styleName: "right-column"
   },
   {
     name: "SaveCost",
     fieldName: "SaveCost",
     width: "80",
     numberFormat: "#,##0",
     suffix: " $",
     header: {
       text: "Payment",
       styleName: "orange-column"
     },
     styleName: "right-column"
   },
   {
     name: "SaveMaturity",
     fieldName: "SaveMaturity",
     width: "80",
     numberFormat: "#,##0.000",
     prefix: "$ ",
     header: {
       text: "Maturity amount",
       styleName: "orange-column"
     },
     styleName: "right-column"
   },
   ... skip ...
];
 
gridView.setColumns(columns);

Specify Datetime Format

Datetime Format is set as a combination of YYYY: year, YY: year as of 2000, MM: month, DD: day, HH: hour, NN: minute, SS: second.

  1. Designate the first payment date as ‘yy-MM-dd’
  2. Specify the end date as ‘yyyy.MM.dd’
var columns = [
   ... skip ...
   {
     name: "StartDate",
     fieldName: "StartDate",
     width: "100",
     datetimeFormat: "yy-MM-dd",
     header: {
       text: "First payment date",
       styleName: "orange-column"
     }
   },
   {
     name: "EndDate",
     fieldName: "EndDate",
     width: "100",
     datetimeFormat: "yyyy.MM.dd",
     header: {
       text: "End date",
       styleName: "orange-column"
     }
   },
   ... skip ...
];
 
gridView.setColumns(columns);
Grid To DivCheck Renderer