Docs

Dialog Modals

ZingGrid has a native dialog component that is fully customizable and extensible with events. This customizable dialog allows you to put contents in a custom modal and abstracts functionality away from developers like centering a modal, masking the background, or clicking away to cancel.

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