• 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.     zg-dialog::part(dialog) {
    10.       background-color: #224a52bd;
    11.     }
    12.  
    13.     zg-dialog::part(form) {
    14.       background-color: ghostwhite;
    15.     }
    16.  
    17.     zg-dialog::part(header-close) {
    18.       background-color: #B00020;
    19.       color: #FFF;
    20.     }
    21.  
    22.     zg-dialog::part(footer-cancel) {
    23.       background-color: #B00020;
    24.       border-color: #B00020;
    25.       color: #FFF;
    26.     }
    27.  
    28.     zg-dialog::part(footer-confirm) {
    29.       background-color: #224a52;
    30.       border-color: #224a52;
    31.     }
    32.  
    33.     zing-grid {
    34.       /* default Liverpool CSS variable colors */
    35.       --zg-row-body-height: 80px;
    36.     }
    37.  
    38.     .zg-body {
    39.       background: #e6e6e6;
    40.     }
    41.  
    42.     zing-grid[loading] {
    43.       height: 373px;
    44.     }
    45.   </style>
    46. </head>
    47.  
    48. <body class="zg-modal">
    49.   <zing-grid caption="CSS Shadow Parts">
    50.     <zg-data data='[
    51.       {
    52.         "name": "Custom Dialog",
    53.         "type": "custom"
    54.       },
    55.       {
    56.         "name": "Custom Dialog",
    57.         "type": "custom"
    58.       },
    59.       {
    60.         "name": "Custom Dialog",
    61.         "type": "custom"
    62.       }
    63.     ]'></zg-data>
    64.     <zg-colgroup>
    65.       <zg-column index="name"></zg-column>
    66.       <zg-column index="type" hidden></zg-column>
    67.       <zg-column index="custom" renderer="viewDialog">
    68.         <button class="view" type="submit">Open ZGDialog</button>
    69.       </zg-column>
    70.     </zg-colgroup>
    71.     <zg-dialog type="custom" label="Custom ZGDialog Example" open>
    72.       <div>
    73.         <p>This is a custom dialog</p>
    74.         <p>Add the "open" attribute to ZGDialog.</p>
    75.         <p>This will have the dialog opened by default.</p>
    76.         <p>Omitting this attribute or setting it to false will hide the dialog.</p>
    77.       </div>
    78.     </zg-dialog>
    79.   </zing-grid>
    80.   <script>
    81.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    82.     // because this Javascript is injected into the document head
    83.     window.addEventListener('load', () => {
    84.       // Javascript code to execute after DOM content
    85.  
    86.       // On row click, click the "Open ZGDialog" button
    87.       const zgRef = document.querySelector('zing-grid');
    88.       let button;
    89.       zgRef.addEventListener('row:click', e => {
    90.         button = e.detail.ZGTarget.querySelector('button');
    91.         button.click();
    92.       });
    93.     });
    94.  
    95.     // Register method to attach click event listener "Open ZGDialog" button
    96.     function viewDialog(customIndex, cellRef, $cell) {
    97.       // $cell.record gives us us direct information related to this row
    98.       const {
    99.         type
    100.       } = $cell.record;
    101.       // $cell.dom() gives us direct access to this <zg-cell> element
    102.       // You can query up and down from there
    103.       const button = $cell.dom().querySelector('button');
    104.       const targetDialog = 'type="custom"';
    105.       let dialog, zg;
    106.       // Add button click listener
    107.       button.addEventListener('click', e => {
    108.         zg = this.widget.webcomponent;
    109.         dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    110.         dialog.setAttribute('type', type);
    111.         dialog.setAttribute('open', '');
    112.       });
    113.     }
    114.     ZingGrid.registerMethod(viewDialog, 'viewDialog');
    115.   </script>
    116. </body>
    117.  
    118. </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 class="zg-modal">
    11.   <zing-grid caption="CSS Shadow Parts">
    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 type="custom" label="Custom ZGDialog Example" open>
    34.       <div>
    35.         <p>This is a custom dialog</p>
    36.         <p>Add the "open" attribute to ZGDialog.</p>
    37.         <p>This will have the dialog opened by default.</p>
    38.         <p>Omitting this attribute or setting it to false will hide the dialog.</p>
    39.       </div>
    40.     </zg-dialog>
    41.   </zing-grid>
    42. </body>
    43.  
    44. </html>
    1. zg-dialog::part(dialog) {
    2.   background-color: #224a52bd;
    3. }
    4.  
    5. zg-dialog::part(form) {
    6.   background-color: ghostwhite;
    7. }
    8.  
    9. zg-dialog::part(header-close) {
    10.   background-color: #B00020;
    11.   color: #FFF;
    12. }
    13.  
    14. zg-dialog::part(footer-cancel) {
    15.   background-color: #B00020;
    16.   border-color: #B00020;
    17.   color: #FFF;
    18. }
    19.  
    20. zg-dialog::part(footer-confirm) {
    21.   background-color: #224a52;
    22.   border-color: #224a52;
    23. }
    24.  
    25. zing-grid {
    26.   /* default Liverpool CSS variable colors */
    27.   --zg-row-body-height: 80px;
    28. }
    29.  
    30. .zg-body {
    31.   background: #e6e6e6;
    32. }
    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. // Register method to attach click event listener "Open ZGDialog" button
    16. function viewDialog(customIndex, cellRef, $cell) {
    17.   // $cell.record gives us us direct information related to this row
    18.   const {
    19.     type
    20.   } = $cell.record;
    21.   // $cell.dom() gives us direct access to this <zg-cell> element
    22.   // You can query up and down from there
    23.   const button = $cell.dom().querySelector('button');
    24.   const targetDialog = 'type="custom"';
    25.   let dialog, zg;
    26.   // Add button click listener
    27.   button.addEventListener('click', e => {
    28.     zg = this.widget.webcomponent;
    29.     dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
    30.     dialog.setAttribute('type', type);
    31.     dialog.setAttribute('open', '');
    32.   });
    33. }
    34. ZingGrid.registerMethod(viewDialog, 'viewDialog');