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.

score 0 · Answer 1 · answered May 11 '13 at 07:59

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.

Ok, I need to be a bit clearer about what I want to happen. Each row has a unique event_id and a team_id which can come from one of two teams. If the row selected in the datatable has a team_id equal to team 1 (for example), I need the dropdown to only display player names from that specific team. The player names for each team are stored in their own arrays. How do I initialise the dropdown in the column definitions? What arguments would be required to change the contents of that column's dropdown? — Nick W, May 15 '13 at 14:42

score 0 · Accepted Answer · edited May 23 '17 at 12:18

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

YUI datatable conditional dropdown editor

2 Answers2