• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        zing-grid {
          /* default Liverpool CSS variable colors */
          --zg-row-body-height: 80px;
        }
    
        body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: nullpx;
        }
      </style>
    </head>
    
    <body>
      <zing-grid caption="ZGDialog Attribute: Label">
        <zg-data data='[
          {
            "name": "Custom Dialog",
            "type": "custom"
          },
          {
            "name": "Custom Dialog",
            "type": "custom"
          },
          {
            "name": "Custom Dialog",
            "type": "custom"
          }
        ]'></zg-data>
        <zg-colgroup>
          <zg-column index="name"></zg-column>
          <zg-column index="type" hidden></zg-column>
          <zg-column index="custom" renderer="viewDialog">
            <button class="view" type="submit">Open ZGDialog</button>
          </zg-column>
        </zg-colgroup>
        <zg-dialog open type="custom" label="Custom Dialog Label" cancel="cancelDialogFnc">
          <div>This is a custom dialog...</div>
        </zg-dialog>
      </zing-grid>
      <script>
        ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
        // Register method to attach click event listener "Open ZGDialog" button
        function viewDialog(customIndex, cellRef, $cell) {
          // $cell.record gives us us direct information related to this row
          const {
            type
          } = $cell.record;
          // $cell.dom() gives us direct access to this <zg-cell> element
          // You can query up and down from there
          const button = $cell.dom().querySelector('button');
          const targetDialog = 'type="custom"';
          let dialog, zg;
          // Add button click listener
          button.addEventListener('click', e => {
            zg = this.widget.webcomponent;
            dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
            dialog.setAttribute('type', type);
            dialog.setAttribute('open', '');
          });
        }
    
        ZingGrid.registerMethod(viewDialog, 'viewDialog');
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body>
      <zing-grid caption="ZGDialog Attribute: Label">
        <zg-data data='[
          {
            "name": "Custom Dialog",
            "type": "custom"
          },
          {
            "name": "Custom Dialog",
            "type": "custom"
          },
          {
            "name": "Custom Dialog",
            "type": "custom"
          }
        ]'></zg-data>
        <zg-colgroup>
          <zg-column index="name"></zg-column>
          <zg-column index="type" hidden></zg-column>
          <zg-column index="custom" renderer="viewDialog">
            <button class="view" type="submit">Open ZGDialog</button>
          </zg-column>
        </zg-colgroup>
        <zg-dialog open type="custom" label="Custom Dialog Label" cancel="cancelDialogFnc">
          <div>This is a custom dialog...</div>
        </zg-dialog>
      </zing-grid>
    </body>
    
    </html>
    zing-grid {
      /* default Liverpool CSS variable colors */
      --zg-row-body-height: 80px;
    }
    
    body {
      background: #e6e6e6;
    }
    // Register method to attach click event listener "Open ZGDialog" button
    function viewDialog(customIndex, cellRef, $cell) {
      // $cell.record gives us us direct information related to this row
      const {
        type
      } = $cell.record;
      // $cell.dom() gives us direct access to this <zg-cell> element
      // You can query up and down from there
      const button = $cell.dom().querySelector('button');
      const targetDialog = 'type="custom"';
      let dialog, zg;
      // Add button click listener
      button.addEventListener('click', e => {
        zg = this.widget.webcomponent;
        dialog = zg.querySelector(`zg-dialog[${targetDialog}]`);
        dialog.setAttribute('type', type);
        dialog.setAttribute('open', '');
      });
    }
    
    ZingGrid.registerMethod(viewDialog, 'viewDialog');