The cell renderer which displays check mark and text together. This renderer is an editable renderer which can update the cell value by clicking the mouse or typing space key when editable is true.
Check mark displays three kinds of states like true, false and undefined if threeState is true. When editing by the mouse or keyboard, it will move the three kinds of states above.
This renderer is mainly used to display and edit the value of BOOLEAN field, but it is not necessary. It reads the values which have been specified in falseValues and trueValues respectively as false and true. The values which are not contained in two properties will be considered as the values which have done type conversion as Boolean. If threeStates is true, it will read undefined, null, empty string as undefined, else will read as false.
The display location of check mark is specified by GridStyles.iconLocation property value, and the space with cell border is set by iconOffset property and the space between check mark and text is set by iconPadding property.
If specify editable as true, you can change the cell value by clicking the mouse. And, if spaceKey property is true, you can change the value by typing space key. At this point, if threeState is true, the value will be changed in the cycle of three states of true -> false -> undefined -> true, else, it will be changed in two states of true -> false -> true. You should be careful since the updated value will use the first value among the values which have been specified by falseValues or trueValues.
If editOnClick is true, even if the cell which has been clicked by the mouse is not Focused Cell, the value will still be updated immediately.
It specifies the type as "check" when setting the column renderer.
grid.setColumns([{
name: "Shipping",
fieldName: "Shipping",
renderer: {
type: "check",
editable: true,
dblClickEditable: false,
threeStates: true,
editOnClick: true,
spaceKey: true,
trueValues: "True",
falseValues: "False"
},
header: {
text: "Check Renderer",
styles: {
fontBold: true
}
}
},
...
]);