RowEditPlugin
The RowEditPlugin
is a custom plugin for RevoGrid that provides row-level editing capabilities, allowing users to edit entire rows inline with dedicated action buttons for saving or canceling changes.
Features:
- Row Editing Mode: Enables editing of entire rows by rendering editors for all cells in the selected row.
- Inline Editors: Supports inline editing of multiple cells in a row simultaneously.
- Action Buttons: Provides intuitive buttons for
Save
andCancel
actions:Save
: DispatchesCELL_EDIT_SAVE_EVENT
to persist changes.Cancel
: DispatchesCELL_EDIT_CANCEL_EVENT
to discard changes.
- Event Handling: Listens for key events to manage row editing:
CELL_EDIT_EVENT
: Initiates row editing mode.CELL_EDIT_SAVE_EVENT
: Saves edited data and updates the grid model.CELL_EDIT_CANCEL_EVENT
: Cancels editing and restores original data.BEFORE_CELL_RENDER_EVENT
: Ensures cells in the editing row render with editors.
Usage:
Import and Initialize the Plugin:
typescriptimport { RowEditPlugin } from '@revolist/revogrid-pro' const grid = document.createElement('revo-grid'); grid.plugins = [RowEditPlugin];
Define Action Column: Use the
editorRowActionColumn
to render action buttons (Edit
,Save
,Cancel
):typescriptimport { editorRowActionColumn } from '@revolist/revogrid-pro' grid.columns = [ { prop: 'name', name: 'Name' }, { prop: 'age', name: 'Age' }, { prop: 'edit', ...editorRowActionColumn, }, // Action column for row editing ];
Action Buttons:
- Edit Button: Dispatches
CELL_EDIT_EVENT
to enable row editing. - Save Button: Dispatches
CELL_EDIT_SAVE_EVENT
to save changes. - Cancel Button: Dispatches
CELL_EDIT_CANCEL_EVENT
to cancel editing and reset the row.
Icon Details:
- Save Icon: Embedded SVG icon representing a "Save" action.
- Cancel Icon: Embedded SVG icon representing a "Cancel" action.
- Edit Icon: Embedded SVG icon representing an "Edit" action.
Scenarios: This plugin is particularly useful for applications where users need to edit multiple cells in a row at once. Typical use cases include updating tabular records or form-like data directly within a grid.
Conclusion: The RowEditPlugin
enhances RevoGrid’s editing capabilities by offering a flexible row editing solution with intuitive controls, efficient event handling, and seamless data integration.
class RowEditPlugin {}
editorRowActionColumn
The editorRowActionColumn is a partial implementation of the ColumnRegular interface. It defines the cellTemplate and editor properties for a column that renders action buttons for row editing.
editorRowActionColumn: {
cellProperties: (props: CellTemplateProp) => { onDblClick: (event: MouseEvent) => void; providers: Providers<DimensionRows>; previousValue?: any; prop: ColumnProp; model: DataType<any>; column: ColumnRegular; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; data: DataType<any>[]; value?: any; };
cellTemplate: (h: HyperFunc<VNode>, props: CellTemplateProp) => VNode;
editor: () => { render(h: HyperFunc<VNode>): VNode[]; };
};