Cell editor in Data Grid

RevoGrid provides a way to define your own editors. Or you can use predefined column types. In order to do so you have to define your class with render method.

As a Function

function TextEditor(dataSchema, saveCallback, closeCallback) {
  return {
      element: null, // will be setup up after render
      editCell: null, // will be setup up after render
      /**
       * required, define custom component structure
       * @param createElement: (tagName: string, properties?: object, value?: any, children: Array) => VNode
       */
      render(createElement) {
          return createElement('input');
      },
      componentDidRender() {}, // optional, called after component rendered
      disconnectedCallback() {}, // optional, called after component destroyed

  };
};

As a Class

class TextEditor {
    public element: Element|null = null;
    public editCell: EditCell|null = null;

    /**
      *  @dataSchema: {ColumnDataSchemaModel} - data
      *  @editCallback: { (val) => void } - callback for finishing edit
      */

    constructor(
        public dataSchema: ColumnDataSchemaModel,
        saveCallback: (value: any) => void,
        closeCallback: () => void
    ) {}

    // optional, called after editor rendered
    componentDidRender() {}

    // optional, called after editor destroyed
    disconnectedCallback() {}

    /**
     * required, define custom component structure
     * @param createElement: (tagName: string, properties?: object, value?: any, children: Array) => VNode
     */
    render(createComponent: HyperFunc<VNode>) {
        return createComponent('input');
    }

    /**
     * Optional method to get the current value from the editor
     * Called during auto-save process
     */
    getValue() {
        // Return the current value from your editor
        return this.element?.value;
    }

    /**
     * Optional method called before auto-save is performed
     * Return false to prevent the auto-save
     * @param value The current value to be saved
     */
    beforeAutoSave(value: any): boolean {
        // Return false to prevent save, true to allow
        return true;
    }

    /**
     * Optional method called before the editor is disconnected
     * Use this to cleanup any resources
     */
    beforeDisconnect() {
        // Cleanup any resources before editor is destroyed
    }
}

Editor Lifecycle and Save Behavior

The editor component includes several important methods for handling save operations and lifecycle events:

Auto-Save Process

When auto-save is triggered (either through saveOnClose or programmatically):

1. The editor calls getValue() to retrieve the current value
2. If beforeAutoSave() is defined, it's called with the value:
   • Return false to prevent the save
   • Return true (or undefined) to allow the save
3. If save is allowed, the value is saved and the editor closes

Save Options

You can control save behavior through:

• saveOnClose property - When true, editor attempts to save on close
• Manual save - Call save callback directly from your editor
• Cancel changes - Prevent save on close by calling cancelChanges()

Use editor in the grid

const columns = [{
    name: 'Person',
    prop: 'name',

    // define editor name
    editor: 'select',
}];
const grid = div.querySelector('revo-grid');
// define editor component and name
grid.editors = {
    'select': customSelect
};