Boolean Column Type
ZingGrid provides a
<zg-column type="boolean">
column type. This column type will automatically format true and false values. While editing the cell, the input field will be type checkbox
.Result Full HTML CSS JS
Edit DownloadFull 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/dev/zinggrid-dev.min.js"></script> <style> .zg-body { background: #e6e6e6; } .zg-body zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 403px; } </style> </head> <body class="zg-body"> <zing-grid caption="<code>boolean</code> Column Type" search sort editor-controls> <zg-colgroup> <zg-column index="val" editor="disabled" header="Without Column Type"></zg-column> <zg-column index="val" type="boolean" header="With Column Type"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "val": "true" }, { "id": 2, "val": false }, { "id": 3, "val": 1 }, { "id": 4, "val": 0 }, { "id": 5, "val": "Hello World!" } ]'></zg-data> </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/dev/zinggrid-dev.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="<code>boolean</code> Column Type" search sort editor-controls> <zg-colgroup> <zg-column index="val" editor="disabled" header="Without Column Type"></zg-column> <zg-column index="val" type="boolean" header="With Column Type"></zg-column> </zg-colgroup> <zg-data data='[ { "id": 1, "val": "true" }, { "id": 2, "val": false }, { "id": 3, "val": 1 }, { "id": 4, "val": 0 }, { "id": 5, "val": "Hello World!" } ]'></zg-data> </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!