• 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>
    /* Overlay */
    .zg-body {
      position: relative;
    }

    .zg-body #githubIssuesOverlay {
      background-color: #090808ab;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 999;
    }

    .zg-body #githubIssuesOverlay p {
      color: #fff;
      font-family: sans-serif;
      font-size: 1.5rem;
      text-align: center;
    }

    zing-grid[loading] {
      height: 395px;
    }
  </style>
</head>

<body>
  <h3>`[createOptions]` sets the options for a CREATE request. In this demo,
    CREATE request is set to insert a non-empty row.</h3>
  <div class="zg-body">
    <div id="githubIssuesOverlay">
      <p>Example only.</p>
      <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    </div>
    <zing-grid context-menu caption="Github Issues Demo" editor-controls>
      <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
        <zg-param name="idKey" value="number"></zg-param>
        <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
        <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
        <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
        <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
        <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
      </zg-data>

      <zg-colgroup>
        <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
        <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
        <zg-column index="title" header="Title"></zg-column>
        <zg-column index="body" header="Description"></zg-column>
        <zg-column type="editor" header="Edit Issue"></zg-column>
        <zg-column type="remover" header="Remove Issue"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    const zgRef = document.querySelector('zing-grid');
    var data;

    function buildInsert(record, method, src) {
      return {
        title: "-- Custom",
        body: "-- From Function",
      };
    }

    function buildUpdate(record) {
      return {
        title: record.title,
        body: record.body,
        state: record.state,
      };
    }
    // Edits an issue
    const editIssue = function(input, number) {
      // Header for post request
      const pHeader = {
        method: 'PATCH',
        body: JSON.stringify(input),
        headers: new Headers({
          'Authorization': 'token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da'
        })
      };
      // Fetch request to edit issue
      fetch('https://api.github.com/repos/zgdemo123/zgtest/issues/' + number, pHeader)
        .then(response => {
          if (!response.ok)
            throw Error('Issue With Fetch');
          return response.json();
        })
        .then(newIssue => {
          console.log('Issue edited');
        })
        .catch(err => {
          console.error(`--- error occurred ---\n ${err}`);
        });
    };
    zgRef.executeOnLoad(function() {
      zgRef.addEventListener('data:record:beforedelete', function(e) {
        console.log("Trigger delete event");
        console.log(e.detail.ZGData);
        editIssue({
          state: "closed"
        }, e.detail.ZGData.data.number);
      });
    });
  </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>
  <h3>`[createOptions]` sets the options for a CREATE request. In this demo,
    CREATE request is set to insert a non-empty row.</h3>
  <div class="zg-body">
    <div id="githubIssuesOverlay">
      <p>Example only.</p>
      <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    </div>
    <zing-grid context-menu caption="Github Issues Demo" editor-controls>
      <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
        <zg-param name="idKey" value="number"></zg-param>
        <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
        <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
        <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
        <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
        <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
      </zg-data>

      <zg-colgroup>
        <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
        <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
        <zg-column index="title" header="Title"></zg-column>
        <zg-column index="body" header="Description"></zg-column>
        <zg-column type="editor" header="Edit Issue"></zg-column>
        <zg-column type="remover" header="Remove Issue"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </div>
</body>

</html>
    /* Overlay */
.zg-body {
  position: relative;
}

.zg-body #githubIssuesOverlay {
  background-color: #090808ab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 999;
}

.zg-body #githubIssuesOverlay p {
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5rem;
  text-align: center;
}
    const zgRef = document.querySelector('zing-grid');
var data;

function buildInsert(record, method, src) {
  return {
    title: "-- Custom",
    body: "-- From Function",
  };
}

function buildUpdate(record) {
  return {
    title: record.title,
    body: record.body,
    state: record.state,
  };
}
// Edits an issue
const editIssue = function(input, number) {
  // Header for post request
  const pHeader = {
    method: 'PATCH',
    body: JSON.stringify(input),
    headers: new Headers({
      'Authorization': 'token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da'
    })
  };
  // Fetch request to edit issue
  fetch('https://api.github.com/repos/zgdemo123/zgtest/issues/' + number, pHeader)
    .then(response => {
      if (!response.ok)
        throw Error('Issue With Fetch');
      return response.json();
    })
    .then(newIssue => {
      console.log('Issue edited');
    })
    .catch(err => {
      console.error(`--- error occurred ---\n ${err}`);
    });
};
zgRef.executeOnLoad(function() {
  zgRef.addEventListener('data:record:beforedelete', function(e) {
    console.log("Trigger delete event");
    console.log(e.detail.ZGData);
    editIssue({
      state: "closed"
    }, e.detail.ZGData.data.number);
  });
});