• 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>
      <zing-grid caption="ZGDialog Attribute: Confirm">
        <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" confirm="myConfirmFnc">
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "confirm" attribute of ZGDialog to a function.</p>
            <p>In our example, we set it to "myConfirm"</p>
            <p>The function is then called when the confirm button below is clicked.</p>
          </div>
        </zg-dialog>
      </zing-grid>
      <script>
        // window.onload 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: Confirm
        function myConfirm(MyDialog) {
          MyDialog.removeAttribute('open');
          alert('Custom Confirm 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', '');
          });
        }
    
        ZingGrid.registerMethod(myConfirm, 'myConfirmFnc');
        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>
        <zing-grid 
        	caption="ZGDialog Attribute: Confirm"
      	>
        <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"
          confirm="myConfirmFnc">
          <div>
            <p>This is a custom dialog</p>
            <p>Set the "confirm" attribute of ZGDialog to a function.</p>
            <p>In our example, we set it to "myConfirm"</p>
            <p>The function is then called when the confirm button below is clicked.</p>
          </div>
        </zg-dialog>
      </zing-grid>
      </body>
    </html>
    zing-grid {
     /* default Liverpool CSS variable colors */
     --zg-row-body-height:80px;
    }
    
    body{background:#e6e6e6;}
    // window.onload 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: Confirm
    function myConfirm(MyDialog) {
      MyDialog.removeAttribute('open');
      alert('Custom Confirm 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','');
      });
    }
    
    ZingGrid.registerMethod(myConfirm, 'myConfirmFnc');
    ZingGrid.registerMethod(viewDialog, 'viewDialog');