• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     zing-grid {
    10.       /* default Liverpool CSS variable colors */
    11.       /* 
    12.  	--zg-caption-background: #e31b23; 
    13.  	--zg-row-body-background_hover: #F6EB61;
    14.  */
    15.     }
    16.  
    17.     body {
    18.       background: #e6e6e6;
    19.     }
    20.  
    21.     zing-grid[loading] {
    22.       height: 181px;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <zing-grid caption="ZGDialog Attribute: Cancel">
    29.     <zg-data data='[
    30.       {
    31.         "name": "Custom Dialog",
    32.         "type": "custom"
    33.       }
    34.     ]'></zg-data>
    35.     <zg-colgroup>
    36.       <zg-column index="name"></zg-column>
    37.       <zg-column index="type" hidden></zg-column>
    38.       <zg-column index="custom" renderer="viewDialog">
    39.         <button class="view" type="submit">Open ZGDialog</button>
    40.       </zg-column>
    41.     </zg-colgroup>
    42.     <zg-dialog type="custom" label="Custom ZGDialog Example" cancel="myCancel" open>
    43.       <div>
    44.         <p>This is a custom dialog</p>
    45.         <p>Set the "cancel" attribute of ZGDialog to a function.</p>
    46.         <p>In our example, we set it to "myCancel"</p>
    47.         <p>The function is then called when the cancel button below is clicked.</p>
    48.       </div>
    49.     </zg-dialog>
    50.   </zing-grid>
    51.   <script>
    52.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    53.     // because this Javascript is injected into the document head
    54.     window.addEventListener('load', () => {
    55.       // Javascript code to execute after DOM content
    56.       // On row click, click the "Open ZGDialog" button
    57.       const zgRef = document.querySelector('zing-grid');
    58.       let button;
    59.       zgRef.addEventListener('row:click', e => {
    60.         button = e.detail.ZGTarget.querySelector('button');
    61.         button.click();
    62.       });
    63.     });
    64.  
    65.     // Custom Dialog Methods: Cancel
    66.     function myCancel(MyDialog) {
    67.       MyDialog.removeAttribute('open');
    68.       alert('Custom Cancel Function Called');
    69.     }
    70.  
    71.     // Register method to attach click event listener "Open ZGDialog" button
    72.     function viewDialog(customIndex, cellRef, $cell) {
    73.       // $cell.record gives us us direct information related to this row
    74.       const {
    75.         type
    76.       } = $cell.record;
    77.       // $cell.dom() gives us direct access to this <zg-cell> element
    78.       // You can query up and down from there
    79.       const button = $cell.dom().querySelector('button');
    80.       const targetDialog = 'type="custom"';
    81.       let dialog, zg;
    82.       // Add button click listener
    83.       button.addEventListener('click', e => {
    84.         zg = this.widget.webcomponent;
    85.         dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    86.         dialog.setAttribute('type', type);
    87.         dialog.setAttribute('open', '');
    88.       });
    89.     }
    90.   </script>
    91. </body>
    92.  
    93. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="ZGDialog Attribute: Cancel">
    12.     <zg-data data='[
    13.       {
    14.         "name": "Custom Dialog",
    15.         "type": "custom"
    16.       }
    17.     ]'></zg-data>
    18.     <zg-colgroup>
    19.       <zg-column index="name"></zg-column>
    20.       <zg-column index="type" hidden></zg-column>
    21.       <zg-column index="custom" renderer="viewDialog">
    22.         <button class="view" type="submit">Open ZGDialog</button>
    23.       </zg-column>
    24.     </zg-colgroup>
    25.     <zg-dialog type="custom" label="Custom ZGDialog Example" cancel="myCancel" open>
    26.       <div>
    27.         <p>This is a custom dialog</p>
    28.         <p>Set the "cancel" attribute of ZGDialog to a function.</p>
    29.         <p>In our example, we set it to "myCancel"</p>
    30.         <p>The function is then called when the cancel button below is clicked.</p>
    31.       </div>
    32.     </zg-dialog>
    33.   </zing-grid>
    34. </body>
    35.  
    36. </html>
    1. zing-grid {
    2.   /* default Liverpool CSS variable colors */
    3.   /* 
    4.  	--zg-caption-background: #e31b23; 
    5.  	--zg-row-body-background_hover: #F6EB61;
    6.  */
    7. }
    8.  
    9. body {
    10.   background: #e6e6e6;
    11. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.   // On row click, click the "Open ZGDialog" button
    6.   const zgRef = document.querySelector('zing-grid');
    7.   let button;
    8.   zgRef.addEventListener('row:click', e => {
    9.     button = e.detail.ZGTarget.querySelector('button');
    10.     button.click();
    11.   });
    12. });
    13.  
    14. // Custom Dialog Methods: Cancel
    15. function myCancel(MyDialog) {
    16.   MyDialog.removeAttribute('open');
    17.   alert('Custom Cancel Function Called');
    18. }
    19.  
    20. // Register method to attach click event listener "Open ZGDialog" button
    21. function viewDialog(customIndex, cellRef, $cell) {
    22.   // $cell.record gives us us direct information related to this row
    23.   const {
    24.     type
    25.   } = $cell.record;
    26.   // $cell.dom() gives us direct access to this <zg-cell> element
    27.   // You can query up and down from there
    28.   const button = $cell.dom().querySelector('button');
    29.   const targetDialog = 'type="custom"';
    30.   let dialog, zg;
    31.   // Add button click listener
    32.   button.addEventListener('click', e => {
    33.     zg = this.widget.webcomponent;
    34.     dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    35.     dialog.setAttribute('type', type);
    36.     dialog.setAttribute('open', '');
    37.   });
    38. }