Editing

Making a grid editable is as simple as adding an editor property to the <zing-grid> element. After that, you can double-click any cell to activate the editor.

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.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Editing Rows

Add the editor-controls attribute to the <zing-grid> tag to display controls for editing and deleting rows.
CloseCopy Copied
<zing-grid data="..." editor-controls></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
Enable the modal (overlay) editor by using editor = "modal" in the <zing-grid> tag. Double-click any cell to check it out!
CloseCopy Copied
<zing-grid data="..." editor="modal"></zing-grid>

By default, the 'modal' editor is enabled for [viewport="mobile"] device widths automatically.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom Editor

Create a custom editor field by registering a custom cell type.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading