YUI datatable conditional dropdown editor

Question

I'm currently editing an application which uses YUI 2.5. I haven't used it before and could use some help.

I want to be able to add a dropdown editor for a particular column's rows using datatable, but I only want it to appear if specific values appear in another column in the corresponding row.

Is it possible to add some kind of If statement in the column definitions? Would I have to use a custom formatter?

eg.

var eventColumnDefs = [
{key:"event_id", sortable:false},
{key:"event_name", sortable:true},
{key:"extended", sortable:true,  formatter: function (o) {
    if (event_name=type1||event_name=type4||event_name=type5) {
        editor:"dropdown", editorOptions:{dropdownOptions:eventData.extendedList}
            }
    }
}];

I know this code wouldn't work, by the way, I would just appreciate a bit of guidance.

Answer 1

Found a hacky solution as follows

In Column Definitions:

var eventColumnDefs = [
    {key:"player_name", sortable:true, editor:"dropdown", editorOptions:{dropdownOptions:currenteam}}
];

Then later on in initialiseTables:

eventDataTable.subscribe("cellClickEvent", function(ev) {
var target, column, field;

target = ev.target;
column = this.getColumn(target);

if (column.key === "player_name") {
field= this.getRecord(target).getData("team_id");
}
if (hometeamlistID == field) {
currenteam=hometeamlist;
} else if (awayteamlistID == field) {
currenteam=awayteamlist; 
}
eventDataTable._oColumnSet._aDefinitions[8].editorOptions.dropdownOptions = currenteam;

});

hometeamlist, awayteamlist, hometeamlistID and awayteamlistID are pulled from an XML string. I haven't included that code above, but some of it is included in my question here:

YUI 2.5. Populating a dropdown from XML

Answer 2

You are close. In the column definition you add the information about the dropdown editor as if you always wanted it to show up. Now, going to the code sample here: http://developer.yahoo.com/yui/datatable/#cellediting

See the last line that attaches onEventShowCellEditor to whatever event you want to make the editor pop up? That is where you put the conditional. Instead of just asking to show the cell editor under any circumstance, you put some code there, like:

myDataTable.subscribe("cellClickEvent", function (ev) {
     if ( ** whatever ** ) {
         this.myDataTable.onEventShowCellEditor.apply(this, arguments);
     }
});

I haven't been doing YUI2 for quite some time now so I don't remember the details on the arguments received by the event listener. I believe that you might also use showCellEditor() instead of onEventShowCellEditor, the later only massages the arguments as received from the event listener and ends up calling showCellEditor so you might as well skip it.