Demos Back to Docs

Editing Data by Modal

111 of 124
Enable the modal (overlay) editor by using editor = "modal" in the <zing-grid> tag. Double-click any cell to check it out!
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>
    zing-grid {
      /* default Liverpool CSS variable colors */
      --zg-caption-background: #e31b23;
      --zg-row-body-background_hover: #F6EB61;
    }

    body {
      background: #e6e6e6;
    }

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

<body>
  <zing-grid caption="Top LiverPool Forwards" sort editor="modal">
    <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-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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>
    <zing-grid
      caption="Top LiverPool Forwards"
      sort 
      editor="modal">
      <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-colgroup>
    </zing-grid>
  </body>
</html>
zing-grid {
 /* default Liverpool CSS variable colors */
 	--zg-caption-background: #e31b23; 
 	--zg-row-body-background_hover: #F6EB61;
}
body{background:#e6e6e6;}
// No JS code

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