How to show a checkbox in a dojo datagrid? - dojo

Question

How to show a checkbox in a dojo datagrid?

Answer 1

I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)

Answer 2

Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4

Answer 3

You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/

Answer 4

You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},

Answer 5

If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php

Answer 6

If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>