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:

Top

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:

Top

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:

Top

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:

Top

Placement

By default, a modal will open in the center of the page and gray out the entire page background. To have the modal centered on the grid only, and gray out the grid only, add the dialog attribute to your <zing-grid> tag.

Related Resources

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