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.

The grid comes built-in with a validator based on the column type. Editing a column with [type="url"] and a [type-url-src] attribute can get tricky because the grid will expect a valid url input. To prevent this validation error from occurring, add [validation="string"] or any [type] to the <zg-column> tag. This will change the validation method 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>

The e[ditor-controls] feature adds a "Create Row" button above the header cells and appends two columns for editing and removing rows. This attribute also enables cell editing. To disable cell editing, set [cell-editor] to "disabled".

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 or when the grid is in card layout ([layout="card"]).

Modal Editor Grid

Here is a complete grid where double-clicking on a cell will activate a modal for editing:


Custom Editor via RegisterEditor()

Instead of using the default grid editor, you can create your own. Create a custom editor field by registering a custom editor object with registerEditor() method, like so:

let editor = {
  init($cell, editorField) {},
  onOpen($cell, editorField, mData) {},
  onClose(editorField) {},

ZingGrid.registerEditor(editor, 'customEditorName');

After, you can use it in the grid by setting [editor] to the name of the custom editor.

RegisterEditor() Grid

The create a custom editor, create an editor config object that defines the editor lifecycle hooks: init(), onOpen() and onClose(). The life cycle hook functions fire when the editor is opened and closed.

The init($cell, editorField) function is used to create and setup the <input> field(s) within the editorField. Any other additional editing-related tools should be placed in editorField. The editorField is the element that appears when opening the editor that serves as a wrapper for the <input> field and any other editing tools you place. Clicking outside of editorField will trigger the editor to close and submit.

The onOpen($cell, editorField, mData) sets the value of the <input> fields.

Lastly, we have the onClose(editorField) to record the value.


Custom Editor via RegisterCellType()

There may be a case where you want to have a column that customizes both the cell editor and renderer. This would require setting [editor] and [renderer] to the methods registered with registerEditor() and registerMethod(), respectively.

This can be shortcut by registering both the editor and renderer through registerCellType() as a custom cell type. This custom cell type can then be set to a column's [type] attribute.

// renderer function for cell
function nameRenderer(first, last, cellRef, $cell) {
  return first.toUpperCase() + ' ' + last.toUpperCase();
// custom editor for cell
let editor = {
  init($cell, editorField) {},
  onOpen($cell, editorField, mData) {},
  onClose(editorField) {},
// register new cell type
ZingGrid.registerCellType('fullName', {
  renderer: nameRenderer,

RegisterCellType() Grid

Check out the section above on creating a custom editor. The key difference between registerEditor() and registerCellType(), is that registerCellType() also registers a renderer for the column. This is useful for columns that multiple [index] values. In our example below, the "name" column contains both "first" and "last" indices.


Custom Editor via Editor Template

There are multiple ways to create a custom editor. Other than creating one through an editor config object, you could also set up an HTML template for the editor modal.

This approach does not create a custom editor for inline cell or row editing. Use the setEditor() approach for that instead.

// Enable model editing and set the editor template on a column
<zing-grid editor="modal">
    <zg-column index="first,last" editor-template="editFullName"></zg-column>

// HTML template for editor modal
<template id="editFullName">
  First Name: <input type="text" value="[[index.first]]"><br><br>
  Last Name: <input type="text" value="[[index.last]]"><br>

Editor Template Grid

To specify an editor template, set [editor-template] to the [id] of a <template> element. The <template> element should have fields that map to the indices of the column. Use index ([[index.INDEX]]) or record ([[record.INDEX]]) tokens to map a field to a record index. Note that the index token is used to reference a ZGColumn[index] value, while the record token can reference any index in the record (row).


Confirmation Dialogs

A confirmation dialog appears when deleting rows. To delete rows without displaying the confirmation dialog, remove it in two different ways.

The first (and simplest) way is through setting the [confirm-delete] attribute to "disabled".


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.

  confirmations="batch-edit, batch-edit-discard"

Related Resources

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

[features: editing]