TextAreaEditor
The TextAreaEditor
is a custom external editor for RevoGrid that enables multi-line text editing directly within grid cells using a <textarea>
element. This editor is particularly useful for scenarios where users need to input or edit larger text content that spans multiple lines, such as comments, descriptions, or notes.
Features:
- Multi-line Text Support: Renders a
<textarea>
element for multi-line input, allowing users to input detailed text content. - Automatic Focus & Selection: Automatically focuses and selects the text content when the editor is rendered, ensuring a seamless user experience.
- Keyboard Navigation: Listens for
Enter
andTab
key events to save changes and move to the next cell, supporting efficient keyboard-based navigation. - Save on Blur: Automatically saves the content and closes the editor when the user clicks outside the editor (
blur
event). - Scroll Glitch Prevention: Ensures smooth user interaction by blurring the input before disconnecting the editor, preventing scroll glitches.
Usage:
- Import
TextAreaEditor
and assign it as an editor for specific columns in the RevoGrid instance. - Ideal for columns that require detailed multi-line text input.
Example
typescript
import { TextAreaEditor } from '@revolist/revogrid-pro'
const grid = document.createElement('revo-grid');
grid.columns = [
{
prop: 'comments',
name: 'Comments',
editor: 'textarea',
},
];
grid.editors = {
textarea: TextAreaEditor,
};
This editor enhances RevoGrid by providing a user-friendly and efficient way to handle multi-line text input, making it suitable for applications requiring rich text editing capabilities within grid cells.
ts
class TextAreaEditor {
/**
* Lifecycle method triggered after the editor is rendered.
* Automatically focuses the textarea.
*/
async componentDidRender(): Promise<void>;
onKeyDown(e: KeyboardEvent);
/**
* IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
*/
beforeDisconnect();
getValue();
/**
* Render method for the TextAreaEditor.
* Creates a textarea element with initial cell value, handles input events, and saves changes on blur.
*/
render(h: HyperFunc<VNode>);
}