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: