Flipkart Search

Tuesday 30 December 2014

Implement selectBooleanRadio in Table Column and show it selected by row selection

Here is use case scenarios:
1. A column with radio button. At a single point of time only one radio button should be shown selected in that column.
2. Selecting the radio button will select that row and vice-versa.

Point no. 1 is achieved by simply drag and drop of selectBooleanRadio component.

 <af:column headerText="Select" id="cs4" rowHeader="true" width="50">       <af:selectBooleanRadio text="" label="Label 1" group="RadioButtons"                                 id="sbr1"/> </af:column>
 Remember to add group="RadioButtons" attribute.

For point no. 2 we have to make a javaScript call.
And here is the required code in jspx or jsff.
  <af:resource type="javascript" source="/js/custom.js"/>
And in custom.js add these Lines.

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

Special thanks for point 2 goes to ADF Goodies.
Here is the Link

No comments:

Post a Comment