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.
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”.
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.
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?
Thanks!
Chris
using formatter code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test different widgets in one column</title>
<link rel="stylesheet" href="lib/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="lib/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/claroGrid.css">
<!-- <link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> -->
<!-- load dojo and provide config via data attribute -->
<script src="lib/1.7.2/dojo/dojo.js"
data-dojo-config="isDebug: true, async: true">
</script>
<script>
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();
});
});
</script>
</head>
<body class="claro">
<h1>test different widgets in one column</h1>
<br/>
<div id="grid"></div>
</body>
json data sample is like this:
{
"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"
}
]
}
You could use the formatter or the get function to do that.
Depending on the value you’d then display a type of dijit. I am not sure it will work, but I think the cellType might still be changed at the moment formatter or get are triggered.