• 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: Label">
    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 Dialog Label" cancel="cancelDialogFnc">
    48.       <div>This is a custom dialog...</div>
    49.     </zg-dialog>
    50.   </zing-grid>
    51.   <script>
    52.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    53.     // Register method to attach click event listener "Open ZGDialog" button
    54.     function viewDialog(customIndex, cellRef, $cell) {
    55.       // $cell.record gives us us direct information related to this row
    56.       const {
    57.         type
    58.       } = $cell.record;
    59.       // $cell.dom() gives us direct access to this <zg-cell> element
    60.       // You can query up and down from there
    61.       const button = $cell.dom().querySelector('button');
    62.       const targetDialog = 'type="custom"';
    63.       let dialog, zg;
    64.       // Add button click listener
    65.       button.addEventListener('click', e => {
    66.         zg = this.widget.webcomponent;
    67.         dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    68.         dialog.setAttribute('type', type);
    69.         dialog.setAttribute('open', '');
    70.       });
    71.     }
    72.  
    73.     ZingGrid.registerMethod(viewDialog, 'viewDialog');
    74.   </script>
    75. </body>
    76.  
    77. </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: Label">
    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 Dialog Label" cancel="cancelDialogFnc">
    34.       <div>This is a custom dialog...</div>
    35.     </zg-dialog>
    36.   </zing-grid>
    37. </body>
    38.  
    39. </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. // Register method to attach click event listener "Open ZGDialog" button
    2. function viewDialog(customIndex, cellRef, $cell) {
    3.   // $cell.record gives us us direct information related to this row
    4.   const {
    5.     type
    6.   } = $cell.record;
    7.   // $cell.dom() gives us direct access to this <zg-cell> element
    8.   // You can query up and down from there
    9.   const button = $cell.dom().querySelector('button');
    10.   const targetDialog = 'type="custom"';
    11.   let dialog, zg;
    12.   // Add button click listener
    13.   button.addEventListener('click', e => {
    14.     zg = this.widget.webcomponent;
    15.     dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    16.     dialog.setAttribute('type', type);
    17.     dialog.setAttribute('open', '');
    18.   });
    19. }
    20.  
    21. ZingGrid.registerMethod(viewDialog, 'viewDialog');