Batch Editing with ZingGrid

ZingGrid is a feature-rich JavaScript library for visualizing and interacting with tabular data. In this article, we'll figure out how to use ZingGrid's powerful new Batch Editing feature in v.1.6.0!

Enabling Batch Edit

Enable batch editing by setting the batch-edit and editor attributes on the <zing-grid> tag (see below). The addition of the attribute will include the batch edit controls on the left of control bar.

To make batch edits, click the "batch edit" button on the control bar. In batch edit mode, a new set of controls (save and discard) will replace the "batch edit" button, and the editable cells are outlined.

Once in batch edit mode, make any amount of edits to the grid. Note that cells that are part of the "recordkey" column or have edit disabled remains un-editable in this mode.

After making your changes, either submit or discard the batch edits through the new set of controls.

To also include insertions or deletions in batch edit mode, include the editor-controls attribute. This will append the row editor and remover columns to the grid.

<zing-grid batch-edit editor-controls></zing-grid>

Custom Status Message (tokenized string)

During batch edit mode, a status message displays the number of raw edits made. This status message can be customized by setting batch-edit-status to a tokenized string.

<zing-grid  
    batch-edit  
    batch-edit-status="The grid has [[modified]] modified rows"  
    editor-controls>
</zing-grid>

Here is a list of available tokens:

• changes: number of raw changes (edits, insertions, deletions)
• deleted: number of rows deleted
• fieldsEdited: number of cells edited
• inserted: number of rows inserted
• modified: number changes (edits, insertions, deletions) to rows
• recordsEdited: number of rows edited

Custom Status Message (function)

The status message can also be customized through a function. Just set batch-edit-status to the name of the function.

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

function customMessage(changes, oDom) {
  return `The grid has ${changes.modified} modified rows`;
};

The function definition for the batch status message is function(changes, oDom).

The first argument, changes, is an object containing the following properties:

• changes: number of raw changes (edits, insertions, deletions)
• deleted: number of rows deleted
• fieldsEdited: number of cells edited
• inserted: number of rows inserted
• modified: number changes (edits, insertions, deletions) to rows
• recordsEdited: number of rows edited

The second argument is oDom, which is the DOM reference to the <span> element containing the batch status message.

Confirmation Dialogs

A confirmation dialog appears when confirming or discarding batch edit changes. To customize which confirmation dialogs to display, use the confirmations attribute.

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>

External Input (get/set)

You can use an external input through the API method setBatchEdit() (see below) to dynamically set batch editing.

The getBatchEdit() API method will return whether batch edit mode is enabled.

const zgRef = document.querySelector('zing-grid');
zgRef.setBatchEdit(true);
console.log(zgRef.getBatchEdit()); // true

The batch edit status and confirmations can also be set through their associated API methods:

• getBatchEditStatus()
• setBatchEditStatus()
• getConfirmations()
• setConfirmations()

I hope this article has provided a jumpstart in using our new Batch Edit feature with ZingGrid. For more information, please visit the Batch Edit ZingGrid documentation at https://www.zinggrid.com/docs/features/batch-editing.
Interested in learning more about ZingGrid or trying it out for yourself? Let us know at support@zinggrid.com or visit us at https://www.zinggrid.com and chat directly with our team!