Dojo DataGrid (DGrid) Adding checkbox column

Question

I am using Dojo Dgrid however i am trying to add a checkbox column however i am not sure of the approach.

Most of the tutorials i have been looking at follow a different code structure and i am unable to create the check box column. I would like to create a checkbox column to select rows

Code (Here is also a Fiddle of my code)

require([
....................... "dojo/domReady!"

], function(parser, declare, Grid, ColumnSet, Selection, selector,Keyboard, DijitRegistry){
      parser.parse();

      var data = [
            { first: "Tom", last: "Evans" },
            { first: "Sherry", last: "Young"},
            { first: "Bob", last: "William"}
        ];

      var columns =     [
          [[
              {editor({name: "CheckBox", field: "bool"}, "checkbox")},
              { field: "first", label: "First" },
            { field: "last", label: "Last" }]]
                        ];           

      var CustomGrid = declare([Grid, ColumnSet, Selection, Keyboard, DijitRegistry]);




      var grid = new CustomGrid ({
            columnSets: columns ,
            "class":"grid"
        }, "grid");
     grid.renderArray(data);   
});

Answer 1

If you want to have a column with checkboxes for the purpose of selecting rows, you should set your sights on the selector column plugin rather than editor. selector is specifically designed to render checkboxes (or radio buttons) in each cell that ties in to the Selection mixin when checked.

See the documentation in the wiki, and the selector test page.

Answer 2

you can also test this solution

first you must add this Modules in require([]) section

"dgrid/extensions/ColumnResizer",
               "esri/request", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dgrid/selector",

then define this array to hold your columns

 var columnsPol = []; 

then add check box type column to array and any other type column to array

 columnsPol.push(
             selector({ label: selector({}), selectorType: "checkbox" })
            );

columnsPol.push({
                label: "",
                field: {any  name},
                formatter: {a  function  for  formatting value  of cell},
                width: "auto",
                });

                .
                .
                .

then define your Grid and set properties

var gridPol = new (declare([Grid, ColumnResizer, Selection]))({
     store: {your data},
     columns: columnsPol,
     minRowsPerPage: 40,
     maxRowsPerPage: 40,
     keepScrollPosition: true,
     selectionMode: 'none',
     allowSelectAll: true,
     loadingMessage: "Loading data...",
     noDataMessage: "No results found."
 }, {Id  for grid});
 gridPol.refresh();

and then you can get selected and deselected rows

 gridPol.on("dgrid-select", function (event) {
           var selectedRows = event.rows;
           });

and deselect

 gridPol.on.on("dgrid-deselect",function (event){
            var deselectedRows = event.rows;
            });