ZGDialog Attribute: Cancel

<!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', '');
  });
}