Docs

Dialog Modals

ZingGrid's modal dialog feature is pre-built with custom properties such as centering, masking the background, and clicking away to cancel. It is fully customizable and extensible with events.

Open

Defines whether the dialog is open or closed.

<zg-dialog open>
  <div>...</div>
</zg-dialog>
Top

Cancel

Defines a custom callback method when clicking on the cancel button in a dialog.

<zg-dialog cancel="cancelDialogFnc">
  <div>...</div>
</zg-dialog>
Top

Confirm

Defines a custom callback method when clicking on the confirm button in a dialog.

<zg-dialog confirm="myConfirmFnc">
  <div>...</div>
</zg-dialog>
Top

Customize Text

Overriding default text values in our modal is a simple key-value pair update through the customizeDialog() method.

const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
  // update  add record button confirm
  zgRef.customizeDialog('record-create', {confirm: 'I Dare you to do it!!!'});
  // first argument 'null' updates all cancel buttons in ALL modals
  zgRef.customizeDialog(null, {cancel: "DON'T DO IT!!!"});
});
Top

Label

Defines the main header text within a dialog.

<zg-dialog label="Custom Dialog Label">
  <div>...</div>
</zg-dialog>
Top