Check renderer

The Check renderer is a renderer that displays the value of a cell in two states: true/false.
A check renderer has been applied to the check column.

If the data is Boolean

//js
var fields = [
   {
     fieldName: "Bool1",
     dataType: "boolean"
   },
   ... skip ...
]
 
dataProvider.setFields(fields);
 
var columns = [
   ... skip ...
   {
     name: "Bool1",
     fieldName: "Bool1",
     width: "60",
     editable: false,
     renderer: {
       type: "check",
     },
     header: {
       text: "Check"
     }
   },
   ... skip ...
];
 
gridView.setColumns(columns);

If the data is Text

If the data to be used in the check renderer is text, specify check and uncheck values as trueValues and falseValues.

//js
var fields = [
   {
     fieldName: "Bool2",
     dataType: "text"
   },
   ... skip ...
]
 
dataProvider.setFields(fields);
 
var columns = [
   ... skip ...
   {
     name: "Bool2",
     fieldName: "Bool2",
     width: "60",
     editable: false,
     renderer: {
       type: "check",
       trueValues: "Y",
       falseValues: "N"
     },
     header: {
       text: "check",
       styleName: "orange-column"
     }
   },
   ... skip ...
];
 
gridView.setColumns(columns);

If there are multiple values to be checked, list them separated by letters.

var columns = [
   ... skip ...
   {
     name: "Bool2",
     fieldName: "Bool2",
     width: "60",
     editable: false,
     renderer: {
       type: "check",
       trueValues: "Y,y,YES,yes", //If there are multiple values to be checked, list them separately
       falseValues: "N,n,NO,no"
     },
     header: {
       text: "check",
       styleName: "orange-column"
     }
   },
   ... skip ...
];

Dynamic application of check renderer 1

Check renderer can be dynamically applied according to specific column values.
This is an example of not displaying the checkbox when the value of the gender column is 'female'.

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 = {}
       var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
 
       if(gender == 'female'){
         ret.renderer = {type: "text"},
         ret.editable = false;
       }
 
       return ret;
     },
     displayCallback: function() {
       return '';
     }
   },
   ... skip ...
];

Dynamic application of check renderer 2

Check renderer can be dynamically applied according to specific column values.
This is an example of disabling the checkbox value from being modified if the value of the gender column is 'female'.

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 = {}
       var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
 
       if(gender == 'female'){
         ret.renderer = {type: "check", editable: false},
       }
 
       return ret;
     },
     displayCallback: function() {
       return '';
     }
   },
   ... skip ...
];

Text Renderer Multicheck renderer