editorCheckbox
The editorCheckbox is a custom cell editor for RevoGrid that provides a checkbox input to edit boolean values directly within the grid cells.
Features:
- Renders a checkbox input element for cells, allowing users to toggle boolean values (
true/false) with a simple click. - Automatically dispatches a
celleditevent upon change, updating the grid's data model with the new value. - Ensures seamless integration with RevoGrid by providing row and column details in the event payload.
Usage:
- Import
editorCheckboxand assign it to thecellTemplateproperty of a column in the RevoGrid. - Ideal for columns that require quick boolean editing, such as toggling statuses or enabling/disabling options.
Example
typescript
import { editorCheckbox } from '@revolist/revogrid-pro'
const grid = document.createElement('revo-grid');
grid.columns = [
{
prop: 'enabled',
name: 'Enabled',
cellTemplate: editorCheckbox,
},
];Event Handling:
- The
editorCheckboxdispatches acelleditevent whenever the checkbox value changes. - The event detail contains:
rgCol: The column index of the edited cell.rgRow: The row index of the edited cell.type: The type of the cell.prop: The property of the cell being edited.val: The new value (true/false) after the checkbox toggle.preventFocus: A flag to control grid focus behavior (default:false).
This editor is particularly useful in scenarios where users need to enable or disable specific options directly from the grid, providing a quick and user-friendly interface for boolean data editing.
ts
editorCheckbox: CellTemplate | undefined;