Row Selection

40 of 125

Row selection will allow you to select all cells in a row by clicking the checkbox input. You can do batch actions (e.g., delete) when you select rows this way.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/V7MKCTGA

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    zing-grid[loading] {
      height: 325px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid selector>
    <zg-colgroup>
      <zg-column type="selector"></zg-column>
      <zg-column index="name" header="Name"></zg-column>
      <zg-column index="num" header="Phone #"></zg-column>
    </zg-colgroup>
    <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</head>
	<body class="zg-body">
		<zing-grid selector>
		  <zg-colgroup>
        <zg-column type="selector"></zg-column>
		    <zg-column index="name" header="Name"></zg-column>
		    <zg-column index="num" header="Phone #"></zg-column>
		  </zg-colgroup>
		  <zg-data data='[{"name": "Michael Smith", "num": "626-538-7713"}, {"name": "James Johnson", "num": "408-612-9244"}, {"name": "Maria Hernandez", "num": "626-184-8190"}, {"name": "David Jenkins", "num": "419-278-1001"}]'></zg-data>
		</zing-grid>
	</body>
</html>

/* No CSS styles */

// No JS code

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

Row Selection

Full Code

Related Docs

Related Docs

Demo Gallery