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.

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>

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

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

Confirmation Dialogs

A confirmation dialog appears when deleting rows. The delete confirmation can be removed in two different ways.

The first (and simplest) way is through setting the confirmDelete attribute to "disabled".

<zing-grid
  confirm-delete="disabled"
  editor-controls>
</zing-grid>

The second way is to use the confirmations attribute. This is recommended when setting the display of multiple confirmation dialogs.

It accepts one or more (comma-separated string) of the following values:

• batch-edit
• batch-edit-discard
• delete

Or set to "disabled" to not display any confirmation dialogs.

<zing-grid
  batch-edit
  batch-edit-status="customStatus"
  confirmations="batch-edit, batch-edit-discard"
  editor-controls>
</zing-grid>

Related Resources

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

• Adding Features Guide
• Editing Features Guide
• API Editor Methods List