Toggle Column Type

10 of 123
ZingGrid provides a <zg-column type="toggle"> column type. This will allow you to have multiple render states, by value. The special value of toggle is you can change the value of the cell without cell edit and can toggle states by clicking on the cell. There is no inline cell editor for toggle types.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-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[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <zing-grid caption="<code>toggle</code> Column Type" search sort editor-controls src="https://examples.zingsoft.com/json-server/employees">
    <zg-column index="name"></zg-column>
    <zg-column index="gender" type="toggle" type-toggle-options='["male", "Female"]' header="Toggle Gender"></zg-column>
    <zg-column index="species" type="toggle" type-toggle-options='["Alien", "Human", "Robot", "Mutant", "Human"]' header="Toggle Species"></zg-column>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-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="<code>toggle</code> Column Type"
      search
      sort
      editor-controls
      src="https://examples.zingsoft.com/json-server/employees">
      <zg-column index="name"></zg-column>
      <zg-column index="gender"  type="toggle" type-toggle-options='["male", "Female"]' header="Toggle Gender"></zg-column>
      <zg-column index="species" type="toggle"  type-toggle-options='["Alien", "Human", "Robot", "Mutant", "Human"]' header="Toggle Species"></zg-column>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] {
  height:400px;
}

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