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...

Comments

Popular Posts