Dojo dGrid header checkbox to select all does not work

Question

I created a dojo dgrid however i used a form wizard to seprate the fields on the form, however with the current structure i am having an issue with the select all feature on the grid.

I cannot select all however if i remove the div Page2 and it content from the form it works.

In firebug i also inspected the DOM and i saw the 'aria-checked = mixed' when i check the select all box when it should be 'aria-checked = true'.

How can i get the header checkbox to allow all records to be selected when it is checked and the grid is in a Wizard form.

Under is some screen shots and code:

jsp

 <div data-dojo-type="dojox.widget.Wizard" hideDisabled="true"
            data-dojo-props="style:'height:300px; width:600px'">        



    <div dojoType="dojox.widget.WizardPane" id="Page2">
        <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeBirthNameContainer">
                    <label>2. Is you name on your Birth Certificate is 
                        different from (1) above ?(e.g. Changed by Deed Poll / Marriage)</label>

                    <s:textfield type="text" required="true" name="birth_surname"
                        id="birth_surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname On Your Birth Certificate!"
                        title="(a). Surname :"
                        style="width: 25em;" />

                    <s:textfield type="text" required="true" name="birth_firstname"
                        id="birth_firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName On Your Birth Certificate!"
                        title="(b). FirstName :" 
                        style="width: 25em;"/>

                    <s:textfield type="text" required="false" name="birth_other_names"
                        id="birth_other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :"
                        style="width: 25em;" />                     

        </div>
    </div>  


    <div dojoType="dojox.widget.WizardPane" id= "Page3">
         <div data-dojo-type="dojox.layout.TableContainer"
            data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:250"
            id="EmployeeIdentificationContainer">

            <label>3. Please Enter At Least Two Forms Of Identification</label> 

            <s:select data-dojo-type="dijit/form/FilteringSelect" id="id"
                        name="id" title= "Identification Type"
                        list="#{'':'Select Your I.D Type','1':'Passport','2':'Drivers Permit','3':'Electoral Identification'}"/>

            <s:textfield type="text" required="true" name="idNumber"
                        id="idNumber" placeholder="Your Identification Number"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Identification Number"
                        title="(a). Identification Number :"
                        style="width: 25em;" />  

        </div>
            <div id="grid"></div>   
    </div>  

</div>

The code is rendered

If i remove the div and it contents for div id= Page2 it works

Layout without dojox.widget.Wizard

Js Code Creating Grid

require([  

  "dijit/form/CheckBox",
  "dijit/dijit",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form", 




]);

require([  
       "dojox/validate/us",
       "dojox/validate/web", 
       "dojox/layout/TableContainer",
       "dojox/layout/GridContainer",
       "dojox/widget/Wizard",
      "dojox/widget/Portlet",
       "dojox/widget/WizardPane",
       "dojox/grid/_CheckBoxSelector"




       ]);

require([  
  "dojo/parser",  
  "dojo/_base/declare",
  "dojo/store/Memory",




  "dgrid/OnDemandGrid",
  "dgrid/ColumnSet",
  "dgrid/Selection",
  "dgrid/selector",
  "dgrid/Keyboard",  
  "dgrid/extensions/DijitRegistry",
  "dgrid/editor",
  "dgrid/extensions/ColumnHider",


  "dojo/domReady!" 

], function(parser, declare, MemoryStore, OnDemandGrid, ColumnSet, Selection, 
            selector,Keyboard, DijitRegistry,editor,ColumnHider){
      parser.parse();


      var data = [
            { id:"1", idType: "Passport", idNumber: "12121545WWW" },
            { id:"2",idType: "Drivers Permit", idNumber: "11212154515 FF"},
            { id:"3",idType: "Electoral Identification", idNumber: "425123123121"}
        ];
    var store = new MemoryStore({

        data: data

    });
      var columns =     [
                         [[
                           {label:"Id", field:"Id"},
                           editor({label: "", field: "select", sortable: false, autoSave:true},"checkbox"),
                           { field: "idType", label: "Identification Type" },
                           { field: "idNumber", label: "Identification Number" }]]
                        ];           

      var CustomGrid = declare([OnDemandGrid, selector,Selection, Keyboard, editor,DijitRegistry,ColumnHider]);




      var grid = new CustomGrid ({
          store: store,
            columns: {
                col1:{
                    label:"Id",
                    field:"Id",
                    hidden:true
                },

                selector: selector( {selectorType: "checkbox"}),

                col3:{
                    label:"ID Type",
                    field:"idType"
                },

                col4:{
                    label:"ID Number",
                    field:"idNumber"
                }

            } ,
            SelectionMode:"none",
            class:'grid',
          allowSelectAll: true
        }, "grid");


     grid.renderArray(data);   
});

Answer 1

You should not be mixing selector and editor into your constructor - they are not designed to be used that way. They are designed to wrap column definition objects (which you are already doing for selector column, though I'd note that selectorType: "checkbox" is unnecessary since that's already the default).

Also, unrelated, selectionMode starts with a lowercase s.

Not sure if this will solve your problem but it will definitely prevent some weird behaviors in general.