title: Problems with Widgets in dojox DataGrid
body: <p>I am trying to include some editing Widgets in my <code>dojox.grid.DataGrid</code> seem to be having a lot of difficulty.  I have tried everything I can think of to get it to work, but something just isn't going right.  When I started having problems, I tried to copy almost exactly from the <a href="http://archive.dojotoolkit.org/nightly/checkout/dojox/grid/tests/robot/_DataGrid.html" rel="nofollow noreferrer">grid tests</a> and model my "breakout" of code just like that, but without success.  Basic editing of the Grid seems to work.  In the example below, the "Events" column allows edits, but the two columns that are using the <code>cellType</code> attribute don't work.  In fact they also seem to ignore the other attributes (like the <code>styles</code>) which would seem to indicate that some sort of issue was run into, but there is nothing in FireBug.  Also I get the same behaviour between Chrome and Firefox.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Insert title here&lt;/title&gt;
      &lt;link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css"&gt;
  
      &lt;style type="text/css"&gt;
      @import "css/gctilog.css";
          @import "javascript/dojotoolkit/dojo/resources/dojo.css";
          @import "javascript/dojotoolkit/dijit/themes/tundra/tundra.css";
          @import "javascript/dojotoolkit/dojox/grid/resources/Grid.css";
          @import "javascript/dojotoolkit/dojox/grid/resources/tundraGrid.css";
          @import "javascript/dojotoolkit/ocp/resources/MultiStateCheckBox.css";
      &lt;/style&gt;
      &lt;script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        dojo.require("dojo.currency");
        dojo.require("dijit.dijit");
          dojo.require("dijit.form.HorizontalSlider");
          dojo.require("dojox.data.JsonRestStore");
          dojo.require("dojox.grid.DataGrid");
          dojo.require("dojox.layout.ExpandoPane");
          dojo.require("dojox.timing");
          dojo.require("ocp.MultiStateCheckBox");
          dojo.require("dojo.parser");
  
          formatCurrency = function(inDatum){
            return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
          }
      &lt;/script&gt;
      &lt;script type="text/javascript" src="javascript/formatter.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="javascript/utilities.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="tundra"&gt;
  
  &lt;div name="labelCallids"&gt;Call IDs&lt;/div&gt;
  &lt;div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"&gt;&lt;/div&gt;
  &lt;table dojoType="dojox.grid.DataGrid" id="callidGrid4" store="callidStore4" query="{ callid: '*' }" style="width: 950px; border: 1px solid rgb(0,156,221); margin-left: 15px;" clientSort="false" autoHeight="10" noDataMessage="No Call IDs Available..."&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th field="callid" width="375px"&gt;Call ID&lt;/th&gt;
        &lt;th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'&gt;Type&lt;/th&gt;
        &lt;th field="event_count" width="40px" editable="true" styles="text-align: right;"&gt;Events&lt;/th&gt;
        &lt;th field="start_ts" width="75px" formatter="secToHourMinSecMS"&gt;Start&lt;/th&gt;
        &lt;th field="end_ts" width="75px" formatter="secToHourMinSecMS"&gt;End&lt;/th&gt;
        &lt;th field="duration" width="75px" formatter="secToHourMinSecMS"&gt;Duration&lt;/th&gt;
        &lt;th cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.HorizontalSlider" field="include" formatter="formatCurrency" constraint="{currency:'EUR'}" editable="true" width="10em" styles='text-align: right;'&gt;Amount&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there anything that I am missing.  It would seem to be fundamental, but I just can't seem to see it. </p>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>What I have done instead is return a dijit Widget using the formatter to return a widget.  So in the declarative model, I specify something like this:</p>
  
  <pre><code>&lt;th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'&gt;Type&lt;/th&gt;
  </code></pre>
  
  <p>And then I wrote a JavaScript function like the below to return the widget I wanted.</p>
  
  <pre><code>function getMultiField(value) {
    var jsonValue = JSON.parse(value); //I provide the value of the widget as JSON
                                       //from my data store, so I need to parse it
    var control = new ocp.MultiStateCheckBox({ //my custom widget
      id : "dMSCB"+(new Date).getTime()+Math.ceil(Math.random()*100000), //generate a unique ID
      value : jsonValue.value,
      onChange : function (value {...}) //code to manipulate the underlying data store
    });
    return control; //The dojo 1.4 grid can handle a returned Widget
  }
  </code></pre>