• 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-caption-background: #e31b23; 
     	--zg-row-body-background_hover: #F6EB61;
     */
        }
    
        body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: 181px;
        }
      </style>
    </head>
    
    <body>
      <zing-grid caption="ZGDialog Attribute: Cancel">
        <zg-data data='[
          {
            "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 type="custom" label="Custom ZGDialog Example" cancel="myCancel" open>
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "cancel" attribute of ZGDialog to a function.</p>
            <p>In our example, we set it to "myCancel"</p>
            <p>The function is then called when the cancel button below is clicked.</p>
          </div>
        </zg-dialog>
      </zing-grid>
      <script>
        ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        window.addEventListener('load', () => {
          // Javascript code to execute after DOM content
          // On row click, click the "Open ZGDialog" button
          const zgRef = document.querySelector('zing-grid');
          let button;
          zgRef.addEventListener('row:click', e => {
            button = e.detail.ZGTarget.querySelector('button');
            button.click();
          });
        });
    
        // Custom Dialog Methods: Cancel
        function myCancel(MyDialog) {
          MyDialog.removeAttribute('open');
          alert('Custom Cancel Function Called');
        }
    
        // 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', '');
          });
        }
      </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: Cancel">
        <zg-data data='[
          {
            "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 type="custom" label="Custom ZGDialog Example" cancel="myCancel" open>
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "cancel" attribute of ZGDialog to a function.</p>
            <p>In our example, we set it to "myCancel"</p>
            <p>The function is then called when the cancel button below is clicked.</p>
          </div>
        </zg-dialog>
      </zing-grid>
    </body>
    
    </html>
    zing-grid {
      /* default Liverpool CSS variable colors */
      /* 
     	--zg-caption-background: #e31b23; 
     	--zg-row-body-background_hover: #F6EB61;
     */
    }
    
    body {
      background: #e6e6e6;
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      // On row click, click the "Open ZGDialog" button
      const zgRef = document.querySelector('zing-grid');
      let button;
      zgRef.addEventListener('row:click', e => {
        button = e.detail.ZGTarget.querySelector('button');
        button.click();
      });
    });
    
    // Custom Dialog Methods: Cancel
    function myCancel(MyDialog) {
      MyDialog.removeAttribute('open');
      alert('Custom Cancel Function Called');
    }
    
    // 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', '');
      });
    }