• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        zing-grid {
          /* default Liverpool CSS variable colors */
          --zg-row-body-height: 80px;
        }
    
        body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: 373px;
        }
      </style>
    </head>
    
    <body>
      <h3>`[label]` sets the label for `&lt;zg-dialog&gt;`.</h3>
      <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 type="custom" label="Custom ZGDialog Example" cancel="cancelDialogFnc" open>
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "label" attribute of ZGDialog to a string.</p>
            <p>In our example, we set it to "Custom ZGDialog Example,"</p>
            <p>which is now displayed as the header of the dialog.</p>
          </div>
        </zg-dialog>
      </zing-grid>
      <script>
        // 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', '');
          });
        }
    
        // function to cancel dialog
        function cancelDialog(dialogRef) {
          window.alert('Canceling Dialog!');
        }
    
        ZingGrid.registerMethod(cancelDialog, 'cancelDialogFnc');
        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" defer></script>
      </head>
      <body>
        <h3>`[label]` sets the label for `&lt;zg-dialog&gt;`.</h3>
        <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 
          type="custom" 
          label="Custom ZGDialog Example"
          cancel="cancelDialogFnc"
          open>
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "label" attribute of ZGDialog to a string.</p>
            <p>In our example, we set it to "Custom ZGDialog Example,"</p>
            <p>which is now displayed as the header of the dialog.</p>
          </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','');
      });
    }
    
    // function to cancel dialog
    function cancelDialog(dialogRef) {
      window.alert('Canceling Dialog!');
    }
    
    ZingGrid.registerMethod(cancelDialog, 'cancelDialogFnc');
    ZingGrid.registerMethod(viewDialog, 'viewDialog');