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

There are multiple ways to create a custom editor. Your first option is to set <zg-column editor="objectName">. Then, you would write the custom onOpen() and onClose() functions that will fire when the editor is opened and closed, respectively. onOpen sets input values to record values while onClose saves record values.

You can also set an HTML template for the editor modal. To do this, set <zg-column editor-template="templateName">.

See the below demo for examples on using both editor and editor-template.

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:

[features: editing]