features
Menu
Menu

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.

On This Page

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.

If you do not have zg-column defined you can shortcut the editor controls on your grid with the editor-controls attribute on the zing-grid tag.

CloseCopy Copied
<zing-grid data="" editor-controls></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Modal Editor

Enable the modal editor by using editor = "modal" in the <zing-grid> tag. Double-click any cell to check it out!

By default, the modal editor is enabled for card view (mobile view) on the grid.

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

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading