[Docs] ZGDialog Attribute: Label

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