Async command with client events


In an updateable table, I have introduced a basic column that contains the following components

-1 async command link
-1 select row on click

The command link is defined to invoke delete on the selected row in the table. I find that I need to click on a row (which will be taken care of by the “select row on click” component) and then hit the command link that is named “delete”. I was hoping to improve this so that hitting the command link automatically selects the row the link was clicked.

For eg.

row 1->[delete] [column 1] [column 2] [column 3]
row 2->[delete] [column 1] [column 2] [column 3]
row 3->[delete] [column 1] [column 2] [column 3]

When I hit [delete] on row 3, I would like the table to automatically select row 3 so that the action assigned to [delete] can pass the necessary parameters of the select row (row 3) to the action.

I am thinking we can do this via the Client-Side Events’ Click. When the user clicks on the link, the client-side event for click will kick in (to select the row), and then call the async command action (to delete the row). Is this assumption correct? If so, what should I put in the Client-Side Event’s Click? Any references that I can check out?

Thank You.

I would recommend using one of the built-in “Table > Table Row Tools > Remove Row [Button|Icon|Link]” Controls to handle removing a row from a table if possible.

If you want to run a command to execute immediately after the row has been removed, you can register a custom table row change listener that will raise the command when the remove row event happens.


For example, in a script block the javascript would look something like this:

var tableModel = CAF.model('#{caf:cid("defaultForm:tableIdHere")}');
tableModel.addRowChangeListener(function(tableId, rowId, eventType) {
    if (eventType == 'remove') {
        //raise the command
        var cmdModel = CAF.model('#{caf:cid("defaultForm:commandControlIdHere")}');

Many thanks Eric!