YUI DataTable delegate event on row

Question

I'm trying to use the delegate to catch the event when a user is clicking on a row, I manage to catch the event, but I needed to get the id of a specific column of the row.

For example, I would like to do the same a this fiddle : http://jsfiddle.net/mPzFT/1/ When you click on a row you get the name value of the row etc.

I tried to do the same but I have this error :

Uncaught TypeError: Object #<c> has no method 'getRecord' 

I'm using DataTable with DataSource and the QueryBuilder as a filter search on the client side.

Here is my delegate code :

Y.delegate('click', function(e) {
                        var target = e.currentTarget,
                            data = this.get('data');
                        var record = data.getRecord(target.get('id')).getValue();
                        console.log(record.id);
                    }, '#enquiry', 'tr', enquiryTable);

My table is quit big, so I just put the main part :

var enquiryTable = new Y.DataTable({
    columns: cols,
    sortable: ['id', 'type', 'createdAt', 'customerName', 'customerEmail', 'customerPhone', 'price', 'extrasCost', 'tradeInAllowanceNet', 'deposit']
});

enquiryTable.plug(Y.Plugin.DataTableDataSource, { datasource: ds});
enquiryTable.render("#enquiry");
sendRequest();

So when I click on a row, I got the e.currentTarget, but after that I don't know how to make it work.

Answer 1

Here is an example from my application:

//....
_tableBindUI   : function(table){
    table.delegate('click', this._clickCellFn, 'td', this, table);
},
_clickCellFn   : function(e, table){
    var record = table.getRecord(e.target);
    //do some stuff
},
//....

It is a bit different, but I think it could be helpful. It is looks like you just try to execute getRecord from incorrect object.

Answer 2

Well I have found a workaround since I couldn't find any solution about the delegate... So I just add a column with button in each row, and now when you click on each button you can get its attribute :

<button class="view-btn" data-value="{value}" data-action="open-enquiry">View</button>

Y.all('.view-btn').each(function(node) {
                        node.on('click', function(e) {
                            e.preventDefault();
                            var id = node.getAttribute('data-value');
                            console.log(id);
                        });
                    });