• 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/zinggrid.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>`[createOptions]` sets the options for a CREATE request. In this demo,
    40.     CREATE request is set to insert a non-empty row.</h3>
    41.   <div class="zg-body">
    42.     <div id="githubIssuesOverlay">
    43.       <p>Example only.</p>
    44.       <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    45.     </div>
    46.     <zing-grid context-menu caption="Github Issues Demo" editor-controls>
    47.       <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
    48.         <zg-param name="idKey" value="number"></zg-param>
    49.         <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
    50.         <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
    51.         <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
    52.         <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
    53.         <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
    54.       </zg-data>
    55.  
    56.       <zg-colgroup>
    57.         <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
    58.         <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
    59.         <zg-column index="title" header="Title"></zg-column>
    60.         <zg-column index="body" header="Description"></zg-column>
    61.         <zg-column type="editor" header="Edit Issue"></zg-column>
    62.         <zg-column type="remover" header="Remove Issue"></zg-column>
    63.       </zg-colgroup>
    64.     </zing-grid>
    65.   </div>
    66.   <script>
    67.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    68.     const zgRef = document.querySelector('zing-grid');
    69.     var data;
    70.  
    71.     function buildInsert(record, method, src) {
    72.       return {
    73.         title: "-- Custom",
    74.         body: "-- From Function",
    75.       };
    76.     }
    77.  
    78.     function buildUpdate(record) {
    79.       return {
    80.         title: record.title,
    81.         body: record.body,
    82.         state: record.state,
    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)
    99.             throw Error('Issue With Fetch');
    100.           return response.json();
    101.         })
    102.         .then(newIssue => {
    103.           console.log('Issue edited');
    104.         })
    105.         .catch(err => {
    106.           console.error(`--- error occurred ---\n ${err}`);
    107.         });
    108.     };
    109.     zgRef.executeOnLoad(function() {
    110.       zgRef.addEventListener('data:record:beforedelete', 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/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <h3>`[createOptions]` sets the options for a CREATE request. In this demo,
    12.     CREATE request is set to insert a non-empty row.</h3>
    13.   <div class="zg-body">
    14.     <div id="githubIssuesOverlay">
    15.       <p>Example only.</p>
    16.       <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    17.     </div>
    18.     <zing-grid context-menu caption="Github Issues Demo" editor-controls>
    19.       <zg-data src="https://api.github.com/repos/zgdemo123/zgtest/issues">
    20.         <zg-param name="idKey" value="number"></zg-param>
    21.         <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>
    22.         <zg-param name="readOptions" value='{"method": "GET"}'></zg-param>
    23.         <zg-param name="createOptions" value='{"method": "POST", "body": "buildInsert"}'></zg-param>
    24.         <zg-param name="updateOptions" value='{"row":{"method": "PATCH", "body": "buildUpdate"}}'></zg-param>
    25.         <zg-param name="deleteOptions" value='{"exclude": true}'></zg-param>
    26.       </zg-data>
    27.  
    28.       <zg-colgroup>
    29.         <zg-column index="number" header="Number.Stats" editor="recordeditor"></zg-column>
    30.         <zg-column type="select" type-select-options="open,close" index="state" header="Number.State"></zg-column>
    31.         <zg-column index="title" header="Title"></zg-column>
    32.         <zg-column index="body" header="Description"></zg-column>
    33.         <zg-column type="editor" header="Edit Issue"></zg-column>
    34.         <zg-column type="remover" header="Remove Issue"></zg-column>
    35.       </zg-colgroup>
    36.     </zing-grid>
    37.   </div>
    38. </body>
    39.  
    40. </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. // Edits an issue
    19. const editIssue = function(input, number) {
    20.   // Header for post request
    21.   const pHeader = {
    22.     method: 'PATCH',
    23.     body: JSON.stringify(input),
    24.     headers: new Headers({
    25.       'Authorization': 'token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da'
    26.     })
    27.   };
    28.   // Fetch request to edit issue
    29.   fetch('https://api.github.com/repos/zgdemo123/zgtest/issues/' + number, pHeader)
    30.     .then(response => {
    31.       if (!response.ok)
    32.         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. zgRef.executeOnLoad(function() {
    43.   zgRef.addEventListener('data:record:beforedelete', function(e) {
    44.     console.log("Trigger delete event");
    45.     console.log(e.detail.ZGData);
    46.     editIssue({
    47.       state: "closed"
    48.     }, e.detail.ZGData.data.number);
    49.   });
    50. });