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
}
