Search code examples
yui

YUI DataTable delegate event on row


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.


Solution

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