YUI Column Selection

Question

I'm having issues using YUI's DataTable Column Selection Functionality. I've tried,

myEndColDataTable.subscribe("theadCellClickEvent", myEndColDataTable.onEventSelectColumn);

and

myEndColDataTable.subscribe("cellClickEvent", function (oArgs) { this.selectColumn(this.getColumn(oArgs.target));
});

The issue is, I have an initial column selected programmatically. I can highlight the other column, but it doesn't remove the selection from the initially-selected column.

Answer 1

I guess I can do this, but its not elegant. There has to be a better way.

myEndColDataTable.subscribe("cellClickEvent", function (oArgs) { var colUnSelect = myEndColDataTable.getSelectedColumns(); myEndColDataTable.unselectColumn(colUnSelect[0]); myEndColDataTable.selectColumn(myEndColDataTable.getColumn(oArgs.target));
});

Answer 2

You are correct - there is no quick clean solution.

YUI DataTable currently (as of 2.8) lacks an unselectAllColmns method to match unselectAllRows (which is called by onEventSelectRow).

It is also worth noting that onEventSelectColumn selects the column header, so unselectAllCells will not work.

You could implement your own unselectAllColumns() function like this:

function unselectAllColumns (dataTable) {
        var i, oColumn, oColumnSet = dataTable.getColumnSet();
        for (i=0; i<oColumnSet.keys.length; i++) {
                oColumn = oColumnSet.keys[i];
                if (oColumn.selected) {
                        dataTable.unselectColumn(oColumn);
                }
        }
}

This will be marginally more efficient than using getSelectedColumns() because you will not need to build an intermediate array of only selected columns (looking at the source getSelectedColumns calls getColumnSet and walks the array just as above).