• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     /* Overlay */
    10.     .zg-body {
    11.       position: relative;
    12.     }
    13.  
    14.     .zg-body #githubIssuesOverlay {
    15.       background-color: #090808ab;
    16.       display: flex;
    17.       flex-direction: column;
    18.       justify-content: center;
    19.       position: absolute;
    20.       height: 100%;
    21.       width: 100%;
    22.       z-index: 999;
    23.     }
    24.  
    25.     .zg-body #githubIssuesOverlay p {
    26.       color: #fff;
    27.       font-family: sans-serif;
    28.       font-size: 1.5rem;
    29.       text-align: center;
    30.     }
    31.  
    32.     zing-grid[loading] {
    33.       height: 395px;
    34.     }
    35.   </style>
    36. </head>
    37.  
    38. <body>
    39.   <h3>`[headers]` sets headers for the request.</h3>
    40.   <div class="zg-body">
    41.     <div id="githubIssuesOverlay">
    42.       <p>Example only.</p>
    43.       <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    44.     </div>
    45.     <zing-grid context-menu caption="Github Issues Demo" editor-controls>
    46.       <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
    47.         <zg-param name="idKey" value="number"></zg-param>
    48.         <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
    49.         <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
    50.         <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
    51.         <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
    52.         <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
    53.       </zg-data>
    54.  
    55.       <zg-colgroup>
    56.         <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
    57.         <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
    58.         <zg-column index="title" header="Title"></zg-column>
    59.         <zg-column index="body" header="Description"></zg-column>
    60.         <zg-column type="editor" header="Edit Issue"></zg-column>
    61.         <zg-column type="remover" header="Remove Issue"></zg-column>
    62.       </zg-colgroup>
    63.     </zing-grid>
    64.   </div>
    65.   <script>
    66.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    67.     const zgRef = document.querySelector('zing-grid');
    68.     var data;
    69.  
    70.     function buildInsert(record, method, src) {
    71.       return {
    72.         title: "-- Custom",
    73.         body: "-- From Function",
    74.       };
    75.     }
    76.  
    77.     function buildUpdate(record) {
    78.       return {
    79.         title: record.title,
    80.         body: record.body,
    81.         state: record.state,
    82.       }
    83.     }
    84.  
    85.     // Edits an issue
    86.     const editIssue = function(input, number) {
    87.       // Header for post request
    88.       const pHeader = {
    89.         method: 'PATCH',
    90.         body: JSON.stringify(input),
    91.         headers: new Headers({
    92.           'Authorization': 'token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da'
    93.         })
    94.       };
    95.       // Fetch request to edit issue
    96.       fetch('https://api.github.com/repos/zgdemo123/zgtest/issues/' + number, pHeader)
    97.         .then(response => {
    98.           if (!response.ok) throw Error('Issue With Fetch');
    99.           return response.json()
    100.         })
    101.         .then(newIssue => {
    102.           console.log('Issue edited');
    103.         })
    104.         .catch(err => {
    105.           console.error(`--- error occurred ---\n ${err}`)
    106.         })
    107.     };
    108.  
    109.     zgRef.executeOnLoad(function() {
    110.       zgRef.addEventListener('data:recordbeforedelete', function(e) {
    111.         console.log("Trigger delete event");
    112.         console.log(e.detail.ZGData);
    113.         editIssue({
    114.           state: "closed"
    115.         }, e.detail.ZGData.data.number);
    116.       });
    117.     });
    118.   </script>
    119. </body>
    120.  
    121. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <h3>`[headers]` sets headers for the request.</h3>
    12.   <div class="zg-body">
    13.     <div id="githubIssuesOverlay">
    14.       <p>Example only.</p>
    15.       <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    16.     </div>
    17.     <zing-grid context-menu caption="Github Issues Demo" editor-controls>
    18.       <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
    19.         <zg-param name="idKey" value="number"></zg-param>
    20.         <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
    21.         <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
    22.         <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
    23.         <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
    24.         <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
    25.       </zg-data>
    26.  
    27.       <zg-colgroup>
    28.         <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
    29.         <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
    30.         <zg-column index="title" header="Title"></zg-column>
    31.         <zg-column index="body" header="Description"></zg-column>
    32.         <zg-column type="editor" header="Edit Issue"></zg-column>
    33.         <zg-column type="remover" header="Remove Issue"></zg-column>
    34.       </zg-colgroup>
    35.     </zing-grid>
    36.   </div>
    37. </body>
    38.  
    39. </html>
    1. /* Overlay */
    2. .zg-body {
    3.   position: relative;
    4. }
    5.  
    6. .zg-body #githubIssuesOverlay {
    7.   background-color: #090808ab;
    8.   display: flex;
    9.   flex-direction: column;
    10.   justify-content: center;
    11.   position: absolute;
    12.   height: 100%;
    13.   width: 100%;
    14.   z-index: 999;
    15. }
    16.  
    17. .zg-body #githubIssuesOverlay p {
    18.   color: #fff;
    19.   font-family: sans-serif;
    20.   font-size: 1.5rem;
    21.   text-align: center;
    22. }
    1. const zgRef = document.querySelector('zing-grid');
    2. var data;
    3.  
    4. function buildInsert(record, method, src) {
    5.   return {
    6.     title: "-- Custom",
    7.     body: "-- From Function",
    8.   };
    9. }
    10.  
    11. function buildUpdate(record) {
    12.   return {
    13.     title: record.title,
    14.     body: record.body,
    15.     state: record.state,
    16.   }
    17. }
    18.  
    19. // Edits an issue
    20. const editIssue = function(input, number) {
    21.   // Header for post request
    22.   const pHeader = {
    23.     method: 'PATCH',
    24.     body: JSON.stringify(input),
    25.     headers: new Headers({
    26.       'Authorization': 'token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da'
    27.     })
    28.   };
    29.   // Fetch request to edit issue
    30.   fetch('https://api.github.com/repos/zgdemo123/zgtest/issues/' + number, pHeader)
    31.     .then(response => {
    32.       if (!response.ok) throw Error('Issue With Fetch');
    33.       return response.json()
    34.     })
    35.     .then(newIssue => {
    36.       console.log('Issue edited');
    37.     })
    38.     .catch(err => {
    39.       console.error(`--- error occurred ---\n ${err}`)
    40.     })
    41. };
    42.  
    43. zgRef.executeOnLoad(function() {
    44.   zgRef.addEventListener('data:recordbeforedelete', function(e) {
    45.     console.log("Trigger delete event");
    46.     console.log(e.detail.ZGData);
    47.     editIssue({
    48.       state: "closed"
    49.     }, e.detail.ZGData.data.number);
    50.   });
    51. });