Editing Data by Row

110 of 122
Add the editor-controls attribute to the <zing-grid> tag to display controls for editing and deleting rows.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

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

    .zg-body zing-grid {
      /* default Liverpool red CSS variable */
      --zg-caption-background: #e31b23;
      --zg-row-body-background_hover: #F6EB61;
    }

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

<body class="zg-body">
  <zing-grid caption="Top LiverPool Forwards" sort editor viewport-stop>
    <zg-data data='[
        {
          "firstName": "Mohamed",
          "lastName": "Salah",
          "number": 11,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
        },
        {
          "firstName": "Sadio",
          "lastName": "Mane",
          "number": 10,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
        },
        {
          "firstName": "Roberto",
          "lastName": "Firmino",
          "number": 9,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
        },
        {
          "firstName": "Daniel",
          "lastName": "Sturridge",
          "number": 15,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" editor="false" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column>
      <zg-column index="firstName"></zg-column>
      <zg-column index="lastName"></zg-column>
      <zg-column index="number" type="range" type-range-step="1"></zg-column>
      <zg-column index="position" sort="disabled" type="select" , type-select-options="Forward, Midfielder"></zg-column>
      <zg-column type="editor"></zg-column>
      <zg-column type="remover"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script></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" defer></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="Top LiverPool Forwards"
      sort
      editor
      viewport-stop>
      <zg-data data='[
        {
          "firstName": "Mohamed",
          "lastName": "Salah",
          "number": 11,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
        },
        {
          "firstName": "Sadio",
          "lastName": "Mane",
          "number": 10,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
        },
        {
          "firstName": "Roberto",
          "lastName": "Firmino",
          "number": 9,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
        },
        {
          "firstName": "Daniel",
          "lastName": "Sturridge",
          "number": 15,
          "position": "Forward",
          "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
        }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column 
        	index="playerImg"
          header=" "
          width="100"
          height="100"
          sort="disabled"
          editor="false"
          type="image"
          type-image-mask="circle"
          type-image-alt="Player Img N/A"></zg-column>
        <zg-column index="firstName"></zg-column>
        <zg-column index="lastName"></zg-column>
        <zg-column index="number" type="range" type-range-step="1"></zg-column>
        <zg-column 
          index="position" 
          sort="disabled" 
          type="select",
		      type-select-options="Forward, Midfielder"></zg-column>
        <zg-column type="editor"></zg-column>
        <zg-column type="remover"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>
.zg-body { background:#e6e6e6; }

.zg-body zing-grid {
 /* default Liverpool red CSS variable */
 --zg-caption-background: #e31b23;
 --zg-row-body-background_hover: #F6EB61;
}

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

Demo Gallery