YUI: get all data of row when click cell - yui

Question

I try to make example with datatable of YUI-2.8.2.
YAHOO.example.DynamicData = function() {
// Column definitions
myColumnDefs = [ // sortable:true enables sorting
{key:"id", label:"id", sortable:true},
{key:"date", label:"date", sortable:true},
{key:"price", label:"price", sortable:true},
{key:"number", label:"number", sortable:true}
];
// Custom parser
var stringToDate = function(sData) {
var array = sData.split("-");
return new Date(array[1] + " " + array[0] + ", " + array[2]);
};
var appendTestBtn = function(sData){
return "<input type=\"button\" value=\"Cancel\" onClick=\"javascript:onGetRowData();\">";
};
// DataSource instance
myDataSource = new YAHOO.util.DataSource("http://developer.yahoo.com/yui/examples/datatable/assets/php/json_proxy.php?");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "records",
fields: [
{key:"id"},
{key:"date"},
{key:"price"},
{key:"number",parser:appendTestBtn}
],
metaFields: {
totalRecords: "totalRecords" // Access to value in the server response
}
};
// DataTable configuration
myConfigs = {
initialRequest: "sort=id&dir=asc&startIndex=0&results=25", // Initial request for first page of data
dynamicData: true, // Enables dynamic server-driven data
sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
paginator: new YAHOO.widget.Paginator({ rowsPerPage:5 }) // Enables pagination
};
// DataTable instance
myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
// Update totalRecords on the fly with value from server
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
return {
ds: myDataSource,
dt: myDataTable
};
}();
In source, i add a button at "number" column (using appendTestBtn method).
I want: when i click that button i can get all data of that row (Currently i only get data of that cell).
Please help me.
Thank you.

Answer 1

You can use a formatter instead:
var buttonFormatter = function (elCell, oRecord, oColumn, oData) {
return "<input type=\"button\" value=\"Cancel\" />"
};
in your column definition:
myColumnDefs = [ // sortable:true enables sorting
{key:"id", label:"id", sortable:true},
{key:"date", label:"date", sortable:true},
{key:"price", label:"price", sortable:true},
{key:"number", label:"number", formatter: buttonFormatter ,sortable:true}
];
and in your schema don't use parser:
fields: [
{key:"id"},
{key:"date"},
{key:"price"},
{key:"number"}
],
Now in your buttonFormatter method you have access to the row like this:
oRecord.getData("id")
oRecord.getData("date")
oRecord.getData("price")
Hope this helps