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>

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>

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,
  editor,
});

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-colgroup>
    <zg-column index="first,last" editor-template="editFullName"></zg-column>
    ...
  <zg-colgroup>
</zing-grid>

// 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>
</template>

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).

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