Thursday, December 12, 2013

Single row selection in af table using radio button

In a read only af table, with row selection enabled you can make the selection visible(ok, its visible by default as the row is highlighted) by having a column with a boolean radio button.
Simply add a leading column to the table and add a selectBooleanRadioButton to it.
Now, since we want only a single row selection, add a variable to the Group property for this button.


Now when you run your page you can select the rows using the radio button.



Further, the user need not click on the radio button specifically to make it appear selected, you just need to add a client listener to the table and call a javascript function:





Add the following javascript to your page:

function rowSelectionListener(evt)
{
var table = evt.getSource();
var selectedRowKey;
for (key in table.getSelectedRowKeys())
{
table.findComponent('sbr1',key).setValue(false);
selectedRowKey = key;
break;
}

table.findComponent('sbr1', selectedRowKey).setValue(true);
}


Where sbr1 is the component id of the radio button.

Now when the user clicks on the row, it is selected and the radio button checked. You can get a handle to the radio button by binding it to a data control attribute.

4 comments: