NOTE: DataGridXL requires a commercial license.
Create an account to download a trial version of DataGridXL to follow the steps in this tutorial.
DataGridXL » Docs
Built-in Column Types
Column Type: Checkbox
The checkbox
column type is a built-in column type with useful features.
If you have a data field that is of a boolean
type (true/false), make this column of type checkbox
.
javascript
const data = [
{
category: "cars",
hasDiscount: true
},
{
category: "bikes",
hasDiscount: false
},
{
category: "planes",
hasDiscount: false
}
];
javascript
const columns = [
{
title: "Has Discount",
source: "hasDiscount"
type: "checkbox"
}
]
Setting the type
to "checkbox"
is a shortcut to these column settings:
javascript
{
isToggle: true,
values: [true, false],
align: 'center',
parseFunction: function(cellValue){
if(cellValue == 'false' || cellValue == 'FALSE' || !cellValue){
return false;
} else {
return true;
}
},
validateFunction: function(cell){
if(typeof cell.value == 'boolean'){
return true;
} else {
return false;
}
},
hideText: true
}
isToggle
Set isToggle: true
to toggle between values
by pressing the spacebar. Any cell value with isToggle: true
that is inside the user's cell selection will toggle between the 2 given values
.
values
When isToggle is true, DataGridXL expects values
to be set. Currently, it is only possible to toggle between two values.
For your boolean field, this is [true, false]
but you could make this any trueValue, falseValue
; even strings.
javascript
// values: [trueValue, falseValue]
values: ["on", "off"]
Generated: 25.01.28 (V3.25.01.22)