Copy contents of existing table row when firing an Add Row Button

I have a table where users fill in data in the different field columns. I added an Add Row Button at the end of each row and labeled it “Copy”. When user clicks it, I want the data from that row to be copied to the new row added.

I’m not sure how to do it. Please help.


None of the existing controls will do that automatically, but the CAF javascript API does have the necessary functionality to do that. See:

You could use a generic ‘Output > Button’ control and write some custom javascript for the ‘Client-Side Events > Click’ control property that uses the CAF javascript APIs to add the row to the table.

For example, the click script would look something like this:

//get the row model object for the clicked row
var rowId = $(this).up('tr').id;
var rowModel = CAF.model(rowId);

//get the table model object
var tableId = $(this).up('table').id;
var tableModel = CAF.model(tableId);

//get the index of the current row
var idx = tableModel.indexOf(rowModel);

//add the row.  
//  First arg is the index of the new row.
//  Second arg is the CAF.Row.Model object to use to populate
//     the values for new row.
tableModel.add(idx, rowModel);