How to create single selectable radio button Table

This tip shows how to create a single selectable row table component. A column of radiobutton components could be used to select a single table row. Dynamic row highlighting is set when ever the state of the radiobutton changes.

You can download the working project here .

Steps

Create a project called SingleSelectTable.
Add a table component.
From the Servers tab drag and drop Data Sources->Travel->Tables->Trip on to the table component.
Right Click on the Table Component and Select Table Layout.
Click on the "New" button to add a new column.
Using "Up" button move the newly added column to the top of the list.
Remove the header text.
Select Radio Button for component type and remove the text in Value Expression Field.
Go to JSP page and remove other Java Scripts added to the table component except the following. Make sure the generated code is similar to the following

<script>
  function initAllRows() {
   var table = document.getElementById("form1:table1");
   table.initAllRows();
  }
</script>

You need to write some logic to hold information about the selected radio button in the Page1.java. So add the follwoing code to the Page1.java

 
    private TableSelectPhaseListener tablePhaseListener = new TableSelectPhaseListener();
    
    public void setSelected(Object object) {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        if (rowKey != null) {
            tablePhaseListener.setSelected(rowKey, object);
        }
    }
    
    public Object getSelected(){
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.getSelected(rowKey);
        
    }
    
    public Object getSelectedValue() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return (rowKey != null) ? rowKey.getRowId() : null;
        
    }
    
    public boolean getSelectedState() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.isSelected(rowKey);
    }

Press Alt-SHift-F to fix the imports.

Now do the following to tell the table component to keep track of selection.

Select the Radio Button (from outline) and set the properties
selected="#{Page1.selected}"
selectedValue="#{Page1.selectedValue}"
name="radioButton1" (for browser compatibility)
select the corresponding table column and set the properties
onClick="setTimeout('initAllRows()', 0)"
selectId="radioButton1"
Select the rowgroup and set the property
selected=#{Page1.selectedState}

Let us add a button, which on click would display the number of the row being selected.

Add a Button (may change the text to "display row no.")
Add a Message Group to display the message after clicking the button.
Double click on the button and add the following code.

 
  public String button1_action() {
        int selectedRows = getTableRowGroup1().getSelectedRowsCount();
        RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
        for(int i=0; i< selectedRowKeys.length; i++){
            int rowId = Integer.parseInt(selectedRowKeys[i].getRowId()) + 1;
            info("Row " + rowId  + " is selected");
        }
        return null;
    }

Deploy the application and in the displayed table component select the radio buttons. Only one row should be selected and highlighted at a time as shown below.

Click on the button and you should see message of the row number being selected as below.

Single Selection Row Table with selection message

Dr. Winston Prakash Ph.D.

Personal Website

How to create single selectable radio button Table