Open dialog in custom Editor/ColumnType

[richardliebmann]

Question
Rather than displaying the input field in the editor, I would like a dialogue to open whenever an edit mode is entered for a column. This might not be the optimal user experience for an edit grid, but it is necessary in this case. Where should I hook in to implement this behaviour? Should I create a custom renderer and override the click/enter events, or implement an editor that opens the dialogue?

Thank you for your help!

[revolist]

Hi @richardliebmann, this should be implemented as a custom editor, not as a custom renderer/click override.

A renderer is best for display-only cell content. If you want the same behavior whenever RevoGrid enters edit mode for that column, define an editor for the column. The editor receives the standard save(value, preventFocus?) and close(focusNext?) callbacks, and you can open your dialog from the editor lifecycle, typically componentDidRender().

A minimal shape is:

class DialogEditor {
  private opened = false;

  constructor(
    private column: any,
    private save: (value?: any, preventFocus?: boolean) => void,
    private close: (focusNext?: boolean) => void,
  ) {}

  editCell?: any;

  componentDidRender() {
    if (this.opened) return;
    this.opened = true;

    openYourDialog({
      value: this.editCell?.val,
      row: this.editCell?.model,
      onConfirm: value => this.save(value),
      onCancel: () => this.close(false),
    });
  }

  render(h: any) {
    // Keep a small placeholder so the grid has an active editor while the dialog is open.
    return h('span', { style: { display: 'none' } });
  }
}

const columns = [
  { prop: 'name', name: 'Name', editor: DialogEditor },
];

You can also register it by name via grid.editors = { dialog: DialogEditor } and use editor: 'dialog' on the column.

The useful hooks are defined by the editor contract: render(), componentDidRender(), optional getValue() for autosave, and optional cleanup hooks like beforeDisconnect() / disconnectedCallback(). So the recommended path is: let normal grid editing open the editor, open your dialog from the editor, then call save(...) or close(...) from the dialog result.