Demos Back to Docs

UpdateRow()

104 of 124
Use the updateRow() API method to update the whole row in the grid.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    #updateCell {
      border: 2px solid;
      width: 7rem;
      height: 2rem;
      border-radius: 5rem;
      margin: 0.5rem;
    }

    #updateRow:hover {
      opacity: 0.6;
    }

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

<body class="zg-body">
  <button id="updateRow">Update Row</button>
  <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    <zg-data data='[
        {
          "playerName": "Eden Hazard",
          "playerClub": "Chelsea",
          "goalsScored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "playerClub": "Fulham",
          "goalsScored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "playerClub": "Manchester City",
          "goalsScored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "playerClub": "Manchester United",
          "goalsScored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "playerClub": "Liverpool",
          "goalsScored": 4   
        }
      ]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    updateRow.addEventListener('click', () => {
      let zgRef = document.querySelector('zing-grid');
      zgRef.updateRow(1, {
        'playerName': 'UPDATED!',
        'playerClub': 'UPDATED CLUB!',
        'goalsScored': 10,
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <button id="updateRow">Update Row</button>
    <zing-grid 
      caption="EPL Top Scorers"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
      <zg-data 
        data='[
        {
          "playerName": "Eden Hazard",
          "playerClub": "Chelsea",
          "goalsScored": 5          
        },
        {
          "playerName": "Aleksandar Mitrovic",
          "playerClub": "Fulham",
          "goalsScored": 5   
        },
        {
          "playerName": "Sergio Agüero",
          "playerClub": "Manchester City",
          "goalsScored": 4   
        },
        {
          "playerName": "Romelu Lukaku",
          "playerClub": "Manchester United",
          "goalsScored": 4   
        },
        {
          "playerName": "Sadio Mané",
          "playerClub": "Liverpool",
          "goalsScored": 4   
        }
      ]'></zg-data>
    </zing-grid>
  </body>
</html>
.zg-body { background:#e6e6e6; }
#updateCell { 
  border: 2px solid;
  width: 7rem;
  height: 2rem;
  border-radius: 5rem;
  margin: 0.5rem;
}

#updateRow:hover {
  opacity: 0.6;
}
updateRow.addEventListener('click', () => {
  let zgRef = document.querySelector('zing-grid');
  zgRef.updateRow(1, {
    'playerName': 'UPDATED!',
    'playerClub': 'UPDATED CLUB!',
    'goalsScored': 10,
  });
});

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery