Dojo DataGrid with Select Widget Formatter (Options)
I ran into quite a nasty issue today.
I have a dojo DataGrid I'm using to get user entry. One of the fields was a text field, but my customer asked for it to be a drop down (Select) instead. It was easy to add the select to the grid using the formatter option like this:
_layout.unshift({
'name' : 'Car',
'field' : 'car',
'editable' : false,
'width' : '65px',
'formatter' : _makeSelect
});
_editGrid = new dojox.grid.DataGrid({
singleClickEdit : true,
store : _editGridStore,
structure : _layout
});
The _layout has more fields, but you get the idea. Then I created a _makeSelect function like this:
var _makeSelect = function(data, index, cell) {
var select = new dijit.form.Select({
options: _cars,
value: data,
});
select._destroyOnRemove=true;
return select;
};
OK. Take note of the options. I'm using an array (_cars) of label/value objects that I set up earlier. Each row in the grid will get this same options object.
I started having an issue where changing a value in one of the selects, would change the value in any other select that I clicked on! It was driving me crazy! I used a reductive process to start removing code until I came up with a small example/test file that I could reproduce the test with. I ended up reproducing the issue/problem with only 2 Selects and no DataGrid at all. See the problem was that I was using the same object for the options. The dojo Select widget does not copy the options, but just takes what you give it. (Google js references). I have not fixed my code yet, but even if I was to use slice to copy my array, the objects (label/value) in the array would NOT get copied. The object reference would get copied, so it would be a reference to an object in a DIFFERENT array!
Morale: Always give a unique options object to a dijit Select. Stay sane!
PS: Could dojo "fix" this? Maybe...
I have a dojo DataGrid I'm using to get user entry. One of the fields was a text field, but my customer asked for it to be a drop down (Select) instead. It was easy to add the select to the grid using the formatter option like this:
_layout.unshift({
'name' : 'Car',
'field' : 'car',
'editable' : false,
'width' : '65px',
'formatter' : _makeSelect
});
_editGrid = new dojox.grid.DataGrid({
singleClickEdit : true,
store : _editGridStore,
structure : _layout
});
The _layout has more fields, but you get the idea. Then I created a _makeSelect function like this:
var _makeSelect = function(data, index, cell) {
var select = new dijit.form.Select({
options: _cars,
value: data,
});
select._destroyOnRemove=true;
return select;
};
OK. Take note of the options. I'm using an array (_cars) of label/value objects that I set up earlier. Each row in the grid will get this same options object.
I started having an issue where changing a value in one of the selects, would change the value in any other select that I clicked on! It was driving me crazy! I used a reductive process to start removing code until I came up with a small example/test file that I could reproduce the test with. I ended up reproducing the issue/problem with only 2 Selects and no DataGrid at all. See the problem was that I was using the same object for the options. The dojo Select widget does not copy the options, but just takes what you give it. (Google js references). I have not fixed my code yet, but even if I was to use slice to copy my array, the objects (label/value) in the array would NOT get copied. The object reference would get copied, so it would be a reference to an object in a DIFFERENT array!
Morale: Always give a unique options object to a dijit Select. Stay sane!
PS: Could dojo "fix" this? Maybe...
Comments
Post a Comment