Docs

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:

Top

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:

Top

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:

Top

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:":

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid: