[SOLVED] Dojo - How can I add checkbox as a column in my DataGrid

Dojo - How can I add checkbox as a column in my DataGrid

Im just a newbie in Dojo. I have a datagrid(which I just copy paste in another tutortial), what I need is a checkbox as a column in this DataGrid. How can I achieve that? Thanks in advance for any help.

Below is my full html code:

 <!DOCTYPE html>
<html >
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet"

href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css"> @import "js/dojo/dojox/grid/resources/claroGrid.css";

/*Grid needs an explicit height by default*/
#gridDiv 
{
    left: 500px;
    width: 600px;
    height: 20em;
    margin-left: 200px;
    margin-top: 100px;
    padding: 10px 10px 10px 10px;
    border:3px solid black;
}

#progButtonNode
{
    position: relative;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js">       
</script>
<SCRIPT SRC="js/requiredDojo.js" type="text/javascript"></SCRIPT>

<script>
var grid;
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom){

/*set up data store*/
var data = {
  identifier: "id",
  items: []
};
var data_list = [
  { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
  { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
  { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i = 0, l = data_list.length; i < rows; i++){
    data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({data: data});

/*set up layout*/
var layout = [[
  {'name': 'NAME', 'field': 'id', 'width': '150px'},
  {'name': 'DESC', 'field': 'col2', 'width': '150px'},
  {'name': 'CODE', 'field': 'col3', 'width': '150px'},
  {'name': 'IS ENABLE', 'field': 'col4', 'width': '150px'}
]];

/*create a new grid*/
grid = new dojox.grid.DataGrid({
    id: 'grid',
    store: store,
    structure: layout,
    rowSelector: '20px'});

    /*append the new grid to the div*/
    grid.placeAt("gridDiv");

    /*Call startup() to render the grid*/
    grid.startup();

});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>

Solution

try

{
   'name': 'NAME', 'field': 'id', 'width': '150px',
   type: dojox.grid.cells.Bool, editable: true
}

you can find more details @

http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells