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);   
});

Ken Franqueiro · Accepted Answer · 2016-01-26T15:33:58.230

3

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.

edited Jan 26 '16 at 15:33

answered Mar 16 '14 at 01:57

Ken Franqueiro

10,559
2
23
40

can you look at this for me please http://stackoverflow.com/questions/22463142/dojo-dgrid-select-all-option-issue – devdar Mar 17 '14 at 20:23
On a related topic, how can we set the checkboxes to be dijit/form/CheckBoxes ? The default ones stand out when using a dijit theme because... well... they're not styled. – Philippe Mar 18 '14 at 00:11
@Ken Franqueiro can you assist with this http://stackoverflow.com/questions/23635574/dojo-date-constraint – devdar May 13 '14 at 16:16

score 1 · Answer 2 · answered Sep 19 '17 at 12:10

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;
            });

Dojo DataGrid (DGrid) Adding checkbox column

2 Answers2

Linked