Richfaces ExtendedDataTable selection question

Question

Please help. Have a look at http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=extendedDataTable&sample=exTableSelection&skin=blueSky

You'll see nice "Cars marketplace" table with multiple selection support. You'll also notice that one of the selected rows appears in bold. What does this bold line mean at all? Is it managed somehow via methods of org.richfaces.component.UIExtendedDataTable or any other RF classes? Cant find an API for that line.

What I'm trying to do, is to create new item inside backing bean and force table selection to point to newly created item. I've managed to set selection via setSelection(), but I have no control over that bold line, it remains on it's previous position, please help.

Ken Chan Ken Chan · Accepted Answer · 2011-03-28T03:47:56

The bold style for the selected row is managed by the stylesheet shipped with richfaces .Each theme in the richfaces has their own stylesheet. You can refer to the official documentation ( It is still a draft version) to see which style classes are available for customizing the look and feel of the rich:extendedDataTable.

For example , rf-edt-r-sel or rf-edt-r-act define the style of the selected row, you can override them by declaring a style for these style class names in the page where you use rich:extendedDataTable

<style type="text/css">
.rf-edt-r-sel{
     background-color: yellow;
}

.rf-edt-r-act{
   font-weight: bold;    
   color: red;
}   
</style>

Reply to the comment:

The RowKey seems to be the row number of the extended table. If you want to get the underlying object (i.e. InventoryItem ) from the UIExtendedDataTable , you have to set the row number you want to retrieve using setRowKey(selectionKey) before calling getRowData() to get the actual object . So dataTable.setRowKey(selectionKey) is used to get the selected InventoryItem from the UIExtendedDataTable in order to put them into the selectionItems (which will be displayed in the "Selected Rows" box that is besides the extended table) . For the purposes of Object originalKey = dataTable.getRowKey(); and dataTable.setRowKey(originalKey); , you can refer to this link .

In richfaces 3.3 , I find UIExtendedDataTable has a method called setActiveRowKey() , which seems can set the active record . But it is removed in the latest version of richfaces 4.0 CR1 .So maybe you can use the UIExtendedDataTable 's java script API to achieve the same effect .

You first define an int property called boldRow in your MBean . Then you will have a <a4j:commandButton> to call a Mbean 's method .This method will assign the row number that you want to select according to your logic. The oncomplete attribute of the button should call the UIExtendedDataTable 's JavaScript API to select a row which row number is equal to boldRow, and then use render attribute to refresh the UIExtendedDataTable. So the <a4j:commandButton> and <rich:extendedDataTable> should probably look like this:

 <a4j:commandButton value="Submit" action = "#{MBean.action}" render="#{rich:clientId('table')}"  
           oncomplete="#{rich:component('table')}.selectRow(#{MBean.boldRow}); #{rich:component('table')}.setActiveRow(#{MBean.boldRow});" />

<rich:extendedDataTable id="table" .....
................
</rich:extendedDataTable>

Richfaces ExtendedDataTable selection question

1 Answers