Editor Row

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 and Cancel actions:
  • Save: Dispatches CELL_EDIT_SAVE_EVENT to persist changes.
  • Cancel: Dispatches CELL_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:

1. Import and Initialize the Plugin:

   import { RowEditPlugin } from '@revolist/revogrid-pro'
   
   const grid = document.createElement('revo-grid');
   grid.plugins = [RowEditPlugin];

2. Define Action Column: Use the editorRowActionColumn to render action buttons (Edit, Save, Cancel):

   import { 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: {
  cellTemplate: (h: HyperFunc<VNode>, props: CellTemplateProp) => VNode;
  editor: () => { render(h: HyperFunc<VNode>): VNode[]; };
};