Editing
ZingGrid's many built-in features includes easy in-cell editing.
Default Editor
Enable editing on the grid by adding the editor
attribute to the <zing-grid>
tag. Once this is done, simply double-click any cell to make changes.
Editing a column with type url
and a type-url-src
attribute can get tricky because the grid will expect a url input. To prevent this validation error from occurring, add validation="string"
or any type
to the appropriate <zg-column>
tag. This will change the expected input type for the <zg-column>
.
Default Editor Grid
Here is a complete grid with the default editor enabled:
Editing Rows
To display static controls for editing and deleting rows, add the editor-controls
attribute to the <zing-grid>
tag, like so:
<zing-grid data="..." editor-controls></zing-grid>
Static Row Edit Controls Grid
Here is a complete grid with buttons to edit and delete rows:
Modal Editor
Enable the modal (overlay) editor by adding editor = "modal"
to the <zing-grid>
tag, like so:
<zing-grid data="..." editor="modal"></zing-grid>
By default, the 'modal' editor is automatically enabled for viewport="mobile"
device widths.
Modal Editor Grid
Here is a complete grid where double-clicking on a cell will activate a modal for editing:
Custom Editor
Create a custom editor field by registering a custom cell type. You can use the registerCellType
method for this, like so:
function nameRenderer(first, last) { return first.toUpperCase() + ' ' + last.toUpperCase(); } let editor = { init($cell, editorField) {}, onOpen($cell, editorField, mData) {}, onClose(editorField) {}, };
ZingGrid.registerCellType('fullName', { renderer: nameRenderer, editor, });
Custom Editor Grid
Here is a complete grid with a custom editor on the "College" column that will prepend any edits with "edited:":
Related Resources
Here are some extra resources related to this feature to help with creating your grid: