title: dojo dialog box with dynamic checkboxes not working
body: <p>Please forgive me if I ask basic questions. Am new to javascript..</p>
  
  <p>I am trying to make a dialog box, dynamically creating a list of checkboxes to appear on this dialog, everyTime a user requests to show one.
  The dialog box should have a scrollbar to scroll if the number of checkboxes increase from defined width.
  I am able to create the dialog box (not a very elegant solution though), but with 1 problem...</p>
  
  <p>The dialog box appearing in windows explorer 9 has a scrollbar that is not moving if i try to hold the scrollbar and move it. Works good on firefox..</p>
  
  <p>Any help is appreciated..</p>
  
  <p>Code:</p>
  
  <pre><code>function filterLocationDisplay()
  {
      destroyElement(FILTER_TABLE_ID);
  
      var clientPrefs = [
      {"MSISDN":"0", "display":true},
      {"MSISDN":"1", "display":false},
      {"MSISDN":"2", "display":true},
      {"MSISDN":"3", "display":false},        
      {"MSISDN":"4", "display":true},
      {"MSISDN":"5", "display":false},
      {"MSISDN":"6", "display":true},
      {"MSISDN":"7", "display":false},        
      {"MSISDN":"8", "display":false},
      {"MSISDN":"9", "display":false},
      {"MSISDN":"10", "display":true},
      {"MSISDN":"20", "display":false},
      {"MSISDN":"30", "display":false},        
      {"MSISDN":"40", "display":false},
      {"MSISDN":"50", "display":true},
      {"MSISDN":"60", "display":false},
      {"MSISDN":"70", "display":true},
      {"MSISDN":"000", "display":true},
      {"MSISDN":"100", "display":false},
      {"MSISDN":"200", "display":true},
      {"MSISDN":"300", "display":false},        
      {"MSISDN":"400", "display":true},
      {"MSISDN":"500", "display":false},
      {"MSISDN":"600", "display":true},
      {"MSISDN":"700", "display":false},        
      {"MSISDN":"800", "display":false},
      {"MSISDN":"900", "display":false},
      {"MSISDN":"1000", "display":true},
      {"MSISDN":"2000", "display":false},
      {"MSISDN":"3000", "display":false},        
      {"MSISDN":"4000", "display":false},
      {"MSISDN":"5000", "display":true},
      {"MSISDN":"6000", "display":false},
      {"MSISDN":"7000", "display":true},                   
      {"MSISDN":"8000", "display":false}        
      ];
  
      var cbFilterDivRef;
      var cbDialogRef;
      if(undefined == dojo.byId("filterDivID") || null == dojo.byId("filterDivID"))
      {
          var filterDivSubmitButton = new dijit.form.Button(
                      {
                          type:"submit",
                          label:"Submit",
                          name:"filterPrefsSubmitButton",
                          id:"filterPrefsSubmitButtonId",
                          dojoType: "dijit.form.Button",
                          onClick:function () { onFilterSubmit("submit"); 
                      }});
  
          var filterDivSelectAllButtonRef = new dijit.form.Button(
                      {
                          type:"button",
                          label:"Select all",
                          name:"filterPrefsSelectAllButton",
                          id:"filterPrefsSelectAllButtonId",
                          dojoType: "dijit.form.Button",
                          onClick:function () { onFilterSubmit("all");
                      }});
  
          var filterDivSelectNoneButtonRef = new dijit.form.Button(
                      {
                          type:"button",
                          label:"Unselect all",
                          name:"filterPrefsSelectNoneButton",
                          id:"filterPrefsSelectNoneButtonId",
                          dojoType: "dijit.form.Button",
                          onClick:function () { onFilterSubmit("none");
                      }});
  
          cbFilterDivRef = dojo.create("div",  
                        {
                            id: "filterDivID"  ,
                            style: {"overflow": "scroll", 
                                      "overflow": "scroll",
                                      "width": "350px", 
                                      "height": "400px"},
                        }, dojo.byId("hiddenDiv"), "first");
  
          filterDivSelectAllButtonRef.placeAt(cbFilterDivRef, "last");
          filterDivSelectNoneButtonRef.placeAt(cbFilterDivRef, "last");              
          filterDivSubmitButton.placeAt(cbFilterDivRef, "last");
      }
      else {
          cbFilterDivRef = dojo.byId("filterDivID");
      }
  
      if(undefined == dojo.byId("FilterDlgID") || null == dojo.byId("FilterDlgID"))
      {
  
          cbDialogRef = new dijit.Dialog({
                      title: "Please select the assets to be displayed",
                      id:"FilterDlgID",
                      style:{"border": "3px groove", "overflow": "none"},
                      content:cbFilterDivRef,
                      autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
                      refocus: !dojo.isIE
              });
      }     
      else {
          cbDialogRef = dijit.byId("FilterDlgID");
      }   
  
      var filterTable = dojo.create("table",
                                   {
                                       id:FILTER_TABLE_ID,
                                       name:FILTER_TABLE_ID,
                                       style:{"position":"relative"}
                                   },
                                   cbFilterDivRef, "first");
      for (var msisdnNo = 0; msisdnNo &lt; clientPrefs.length ; ++msisdnNo)
      {
          var row = filterTable.insertRow(filterTable.rows.length);// create a table to contain the checkbox
          // and Asset ID.
          var assetId = clientPrefs[msisdnNo].MSISDN; 
          var checkBoxCell = row.insertCell(0); checkBoxCell.setAttribute("id", assetId+".cell");
          var assetIdCell = row.insertCell(1);  assetIdCell.innerHTML = assetId;
  
         var checkBox = dijit.byId(assetId+ID_CB_SUFFIX) ;
          //destroy the checkBox widget .. if its created..
          if (null != checkBox || undefined != checkBox )
          {
              checkBox.destroy();
          }
          checkBox = new dijit.form.CheckBox({
                  id:      assetId+ID_CB_SUFFIX,
                  name:    assetId,
                  value: "true"
                });            
          checkBox.setChecked(clientPrefs[msisdnNo].display);
          checkBox.placeAt(assetId+".cell", "first");
      }
      cbDialogRef.show();
  
  }
  
  /**
   * 
   */
  function onFilterSubmit(option)
  {
      var filterTable = dojo.byId(FILTER_TABLE_ID); //document.getElementById(FILTER_TABLE_ID);
      if(null == filterTable || undefined == filterTable)
      {
          return false;
      }
      // get the list of checkboxes xhc
      var checkBoxesList = null;
      if("submit" != option) {
      checkBoxesList = dojo.query('input[type="checkbox"]', FILTER_TABLE_ID);
      }
      else {
          checkBoxesList = dojo.query('input:checked', FILTER_TABLE_ID);
      }
      alert(checkBoxesList.length);
      var returnObject = new Array();
      var assetCount = 0;
      for(var assetCount =0 ; assetCount &lt; checkBoxesList.length; assetCount++)
      {
          var assetDisplayPrefCb = dijit.getEnclosingWidget(checkBoxesList[assetCount]);
          var assetId = assetDisplayPrefCb.get("name");
          switch (option) {
              case "all":
              {
                  assetDisplayPrefCb.setChecked(true);
                  break;
              }
              case "none":
              {
                  assetDisplayPrefCb.setChecked(false);
                  break;                    
              }
              case "submit":
              default:
              {
                  returnObject[assetCount] = new Object();
                  returnObject[assetCount].assetId = assetId;
                  returnObject[assetCount].display = assetDisplayPrefCb.getValue("checked");//checked;
              }
          } 
      }
  alert("returnObject.length == " + returnObject.length);
  return returnObject;
  }// onSubmit(option)
  </code></pre>