CheckColumn
A column that displays a checkbox in the cell. The value of the backing field is toggled by the checkbox.
Toggling of the checkboxes is disabled if a record is readOnly or if the CellEdit feature is not enabled.
This column renders a Checkbox into each cell, and it is not intended to be changed. If you want to hide certain checkboxes, you can use the renderer method to access the checkbox widget as it is being rendered.
new Grid({
appendTo : document.body,
columns : [
{
type: 'check',
field: 'allow',
// In the column renderer, we get access to the record and CheckBox widget
renderer({ record, widgets }) {
// Hide checkboxes in certain rows
widgets[0].hidden = record.readOnly;
}
}
]
});
//<code-header>
fiddle.title = 'Check column';
//</code-header>
// grid with CheckColumn
const grid = new Grid({
appendTo : targetElement,
// makes grid as high as it needs to be to fit rows
autoHeight : true,
data : DataGenerator.generateData(5),
columns : [
{ field : 'name', text : 'Name', flex : 1 },
{ type : 'check', field : 'done', text : 'CheckColumn', flex : 1, align : 'center' }
]
});Configs
85
Configs
85Common
Accessibility
The aria-label used for the default checkbox widget in this column’s cells.
Layout
The minimum column width. If value is a Number, then the width is in pixels
Other
true to show a checkbox in the column header to be able to select/deselect all rows
true to display a SlideToggle instead of a Checkbox
Rendering
CSS class name to add to checkbox
Integration
Interaction
Menu
Misc
Properties
155
Properties
155Common
Accessibility
The aria-label used for the default checkbox widget in this column’s cells.
Class hierarchy
Layout
The minimum column width. If value is a Number, then the width is in pixels
Other
true to show a checkbox in the column header to be able to select/deselect all rows
Rendering
CSS class name to add to checkbox
Editing
Integration
Interaction
JSON
Menu
Misc
Parent & children
Functions
78
Functions
78Configuration
Editing
Events
Identification
Misc
Other
Parent & children
Events
8
Events
8Fired when a cell is clicked to toggle its checked status. Returning false will prevent status change.
// Adding a listener using the "on" method
checkColumn.on('beforeToggle', ({ source, record, checked }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Column | This Column |
record | Model | The record for the row containing the cell. |
checked | Boolean | The new checked status of the cell. |
Fired when a cell is clicked to toggle its checked status.
// Adding a listener using the "on" method
checkColumn.on('toggle', ({ source, record, checked }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Column | This Column |
record | Model | The record for the row containing the cell. |
checked | Boolean | The new checked status of the cell. |
Fired when the header checkbox is clicked to toggle its checked status.
// Adding a listener using the "on" method
checkColumn.on('toggleAll', ({ source, checked }) => {
});| Parameter | Type | Description |
|---|---|---|
source | CheckColumn | This Column |
checked | Boolean | The checked status of the header checkbox. |
Event handlers
8
Event handlers
8Called when a cell is clicked to toggle its checked status. Returning false will prevent status change.
new CheckColumn({
onBeforeToggle({ source, record, checked }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Column | This Column |
record | Model | The record for the row containing the cell. |
checked | Boolean | The new checked status of the cell. |
Called when a cell is clicked to toggle its checked status.
new CheckColumn({
onToggle({ source, record, checked }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Column | This Column |
record | Model | The record for the row containing the cell. |
checked | Boolean | The new checked status of the cell. |
Called when the header checkbox is clicked to toggle its checked status.
new CheckColumn({
onToggleAll({ source, checked }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | CheckColumn | This Column |
checked | Boolean | The checked status of the header checkbox. |