Row Selector Column Type
ZingGrid provides a
<zg-column type="selector"> column type. This column type is a render-only field and will automatically display a checkbox to select or multi-select rows to delete.
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 nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } .zg-body zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 421px; } </style> </head> <body class="zg-body"> <zing-grid caption="<code>row-selector</code> Column Type" row-selector search sort editor> <zg-data data='[{"name": "Philip J. Fry", "origin": "Earth"}, {"name": "Turanga Leela", "origin": "Earth"}, {"name": "Bender Bending Rodriguez", "origin": "Earth"}, {"name": "Amy Wong", "origin": "Mars"}, {"name": "Doctor John Zoidberg", "origin": "Decapod 10"}, {"name": "Lord Nibbler", "origin": "Eternium"}]'></zg-data> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="origin"></zg-column> </zg-colgroup> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </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"></script> </head> <body class="zg-body"> <zing-grid caption="<code>row-selector</code> Column Type" row-selector search sort editor> <zg-data data='[{"name": "Philip J. Fry", "origin": "Earth"}, {"name": "Turanga Leela", "origin": "Earth"}, {"name": "Bender Bending Rodriguez", "origin": "Earth"}, {"name": "Amy Wong", "origin": "Mars"}, {"name": "Doctor John Zoidberg", "origin": "Decapod 10"}, {"name": "Lord Nibbler", "origin": "Eternium"}]'></zg-data> <zg-colgroup> <zg-column index="name"></zg-column> <zg-column index="origin"></zg-column> </zg-colgroup> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} .zg-body zing-grid[loading] { height:400px; }
// 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!