Docs

Batch Editing

ZingGrid has the ability to apply batch edits, which allows editing, inserting, and removing multiple rows quickly. Enable this feature by adding the batch-edit attribute to your grid.

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 uneditable 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>
Top

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
Top

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.

Top

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>
Top

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()
Top

[features: batch editing]