• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     #updateCell {
    14.       border: 2px solid;
    15.       width: 7rem;
    16.       height: 2rem;
    17.       border-radius: 5rem;
    18.       margin: 0.5rem;
    19.     }
    20.  
    21.     #updateRow:hover {
    22.       opacity: 0.6;
    23.     }
    24.  
    25.     zing-grid[loading] {
    26.       height: 373px;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body class="zg-body">
    32.   <button id="updateRow">Update Row</button>
    33.   <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    34.     <zg-data data='[
    35.         {
    36.           "playerName": "Eden Hazard",
    37.           "playerClub": "Chelsea",
    38.           "goalsScored": 5          
    39.         },
    40.         {
    41.           "playerName": "Aleksandar Mitrovic",
    42.           "playerClub": "Fulham",
    43.           "goalsScored": 5   
    44.         },
    45.         {
    46.           "playerName": "Sergio Agüero",
    47.           "playerClub": "Manchester City",
    48.           "goalsScored": 4   
    49.         },
    50.         {
    51.           "playerName": "Romelu Lukaku",
    52.           "playerClub": "Manchester United",
    53.           "goalsScored": 4   
    54.         },
    55.         {
    56.           "playerName": "Sadio Mané",
    57.           "playerClub": "Liverpool",
    58.           "goalsScored": 4   
    59.         }
    60.       ]'></zg-data>
    61.   </zing-grid>
    62.   <script>
    63.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    64.     updateRow.addEventListener('click', () => {
    65.       let zgRef = document.querySelector('zing-grid');
    66.       zgRef.updateRow(1, {
    67.         'playerName': 'UPDATED!',
    68.         'playerClub': 'UPDATED CLUB!',
    69.         'goalsScored': 10,
    70.       });
    71.     });
    72.   </script>
    73. </body>
    74.  
    75. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <button id="updateRow">Update Row</button>
    12.   <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    13.     <zg-data data='[
    14.         {
    15.           "playerName": "Eden Hazard",
    16.           "playerClub": "Chelsea",
    17.           "goalsScored": 5          
    18.         },
    19.         {
    20.           "playerName": "Aleksandar Mitrovic",
    21.           "playerClub": "Fulham",
    22.           "goalsScored": 5   
    23.         },
    24.         {
    25.           "playerName": "Sergio Agüero",
    26.           "playerClub": "Manchester City",
    27.           "goalsScored": 4   
    28.         },
    29.         {
    30.           "playerName": "Romelu Lukaku",
    31.           "playerClub": "Manchester United",
    32.           "goalsScored": 4   
    33.         },
    34.         {
    35.           "playerName": "Sadio Mané",
    36.           "playerClub": "Liverpool",
    37.           "goalsScored": 4   
    38.         }
    39.       ]'></zg-data>
    40.   </zing-grid>
    41. </body>
    42.  
    43. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. #updateCell {
    6.   border: 2px solid;
    7.   width: 7rem;
    8.   height: 2rem;
    9.   border-radius: 5rem;
    10.   margin: 0.5rem;
    11. }
    12.  
    13. #updateRow:hover {
    14.   opacity: 0.6;
    15. }
    1. updateRow.addEventListener('click', () => {
    2.   let zgRef = document.querySelector('zing-grid');
    3.   zgRef.updateRow(1, {
    4.     'playerName': 'UPDATED!',
    5.     'playerClub': 'UPDATED CLUB!',
    6.     'goalsScored': 10,
    7.   });
    8. });