Problems with Widgets in dojox DataGrid
- by Kitson
I am trying to include some editing Widgets in my dojox.grid.DataGrid 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 grid tests 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 cellType attribute don't work. In fact they also seem to ignore the other attributes (like the styles) 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css">
<style type="text/css">
@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";
</style>
<script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"></script>
<script type="text/javascript">
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);
}
</script>
<script type="text/javascript" src="javascript/formatter.js"></script>
<script type="text/javascript" src="javascript/utilities.js"></script>
</head>
<body class="tundra">
<div name="labelCallids">Call IDs</div>
<div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"></div>
<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...">
<thead>
<tr>
<th field="callid" width="375px">Call ID</th>
<th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'>Type</th>
<th field="event_count" width="40px" editable="true" styles="text-align: right;">Events</th>
<th field="start_ts" width="75px" formatter="secToHourMinSecMS">Start</th>
<th field="end_ts" width="75px" formatter="secToHourMinSecMS">End</th>
<th field="duration" width="75px" formatter="secToHourMinSecMS">Duration</th>
<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;'>Amount</th>
</tr>
</thead>
</table>
</body>
</html>
Is there anything that I am missing. It would seem to be fundamental, but I just can't seem to see it.
[EDIT]
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:
<th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'>Type</th>
And then I wrote a JavaScript function like the below to return the widget I wanted.
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
}
