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