title: How to create a column with different widget in dojo.grid.DataGrid?
body: <p>I am not sure it's a good idea to try to create different kind of widgets of cells in a dojo.grid.DataGrid's column, please correct me if I am wrong.</p>
  
  <p>Here is my problem: I need to display and let the user to edit a set of key-value pairs, so I choose the DataGrid to do it. the key is simple, they are all strings, but the value is different according to a certain key. some of them has a range like "1-100", some of them are only a switch with "true/false" values, some of them have several values to choose like "easy/middle/hard". </p>
  
  <p>So I think for the different type of values, I should use different widget to represent the certain operations that user can do. For the first one, I use a text aera with some value check when the value is changed. the second I should use a checkbox, the third one I should use a combobox.</p>
  
  <p>After read some official dojo 1.7 document, I found there is no direct way provided by the dojo.grid.DataGrid to do what I want, the DataGrid assume cells in one column should have the same type. Can anyone help me on this problem? show me some sample code to give me a direction. Thanks! I am also thinging about another solution, the cells in the "value" column are all text aera, when click it, a popup window shows up with the correct widget on it, change the value there. Can anybody tell me if this way is more easier to implement?</p>
  
  <p>Thanks!<br>
  Chris</p>
  
  <p>using formatter code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;test different widgets in one column&lt;/title&gt;
      &lt;link rel="stylesheet" href="lib/1.7.2/dojo/resources/dojo.css"&gt;
      &lt;link rel="stylesheet" href="lib/1.7.2/dijit/themes/claro/claro.css"&gt;
      &lt;link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/Grid.css"&gt;
      &lt;link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/claroGrid.css"&gt;
  
      &lt;!-- &lt;link rel="stylesheet" href="style.css" media="screen"&gt;
      &lt;link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"&gt; --&gt;
      &lt;!-- load dojo and provide config via data attribute --&gt;
      &lt;script src="lib/1.7.2/dojo/dojo.js"
          data-dojo-config="isDebug: true, async: true"&gt;
      &lt;/script&gt;
      &lt;script&gt;
  
          var grid, dataStore;
          require(["dojox/grid/DataGrid", 
                   "dojo/store/Memory",
                   "dojo/data/ObjectStore", 
                   "dojo/_base/xhr",
                   "dojo/domReady!",
                   "dijit/form/Button",
                   "dijit/form/ComboButton",
                   "dijit/Menu",
                   "dijit/MenuItem",
                   "dojox/grid/cells/dijit",
                   "dijit/form/ComboBox",
                   "dijit/form/ValidationTextBox"
                   ], function(DataGrid, Memory, ObjectStore, xhr, Button, ComboButton, Menu, MenuItem, ComboBox, ValidationTextBox) {
                   var gridCellsDijit = dojox.grid.cells;
  
              xhr.get({
                  url: "jsondata",
                  handleAs: "json"
              }).then(function(data){
                      dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });
  
                      grid = new DataGrid({
                      store: dataStore,
                      query: { id: "*" }, 
                      escapeHTMLInData : false,
                      structure: [
  
                          {
                              name: "Setting Name", field: "setting_name", width: "50%", editable : false
                          },
  
                          {
                              name: "value", field: "_item", width: "50%", type: dojox.grid.cells._Widget, editable: false,
                              formatter: function(item, rowIndex, cell){
                                  var store = cell.grid.store;
                                  if (store.getValue(item, 'type') == 'enum') {
                                      var stateStore = new Memory({
                                              data: [
                                                  {name:"setting1", id:"1"},
                                                  {name:"setting2", id:"2"},
                                                  {name:"setting3", id:"3"},
                                              ]
                                          });
  
                                      var comboBox = new dijit.form.ComboBox({
                                                  name: "state",
                                                  value: "setting1",
                                                  store: stateStore,
                                                  searchAttr: "name"
                                              });
                                      return comboBox;
  
                                  }
                                  else {
                                      var tb = new dijit.form.ValidationTextBox({promptMessage:'testtest'});
                                      return tb;
                                  }
  
                              }
                              }
                           ]
                  }, "grid");
  
                  grid.startup();
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="claro"&gt;
      &lt;h1&gt;test different widgets in one column&lt;/h1&gt;
  
      &lt;br/&gt;
      &lt;div id="grid"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>json data sample is like this:</p>
  
  <pre><code>{
  "items": [
      {
          "setting_name": "setting1", 
          "value": "YES",
          "type":"enum",
          "candidates" : ["YES", "NO"]
  
      }, 
      {
          "setting_name": "setting2", 
          "value": "Disable",
          "type":"enum",
          "candidates" : ["Disable", "Enable"]
  
      } ,
      {
          "setting_name": "setting3", 
          "value": "19200",
          "type":"enum",
          "candidates" : ["9600", "19200", "38400", "57600"]
      }, 
      {
          "setting_name": "setting4", 
          "value": "25",
          "type":"decimal",
          "min" : "1",
          "max" : "99"
      }, 
      {
          "setting_name": "setting5", 
          "value": "1A",
          "type":"hex",
          "min" :"0" ,
          "max" :"FF"
      }
     ]
  </code></pre>
  
  <p>}</p>