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 on Render

To add a dialog modal that immediately opens when the grid renders, simply include <zg-dialog> with an open attribute on it, like so:

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

Dialog on Render Grid

Here is a complete grid with a dialog modal on render:

Confirm/Cancel Actions

You can add a custom callback method when clicking on the "confirm" or "cancel" button in a modal by including the appropriate attribute with a function as its value, like so:

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

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

Custom Dialog Confirm Button Action Grid

Here is a complete grid with a custom action when the "confirm" button is clicked:

Custom Dialog Cancel Button Action Grid

Here is a complete grid with a custom action when the "cancel" button is clicked:

Customize Button Text

Customize the default button text values in your modal by updating the key-value pair with the customizeDialog() method, like so:

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!!!"});
});

Custom Dialog Buttons Grid

Here is a complete grid with custom button text for the modals that appear when you try to edit the grid:

Enable and Customize Label

To define the main header text within a modal, add a label attribute, like so:

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

Labelled Dialog Grid

Here is a complete grid with a custom dialog label:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• API Methods List
• API Elements List