Updating a row in dataTable

[dev_team]

I am using Rich faces to display a dataTable.
There are many rows in it, with a colum 'Actions'.

<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
cellpadding="0" cellspacing="0"
width="550" border="0" value="#{CreateBean.urlList}" var="urlList1" binding="#{CreateBean.dataTable}" >
<f:facet name="header">
<rich:columnGroup >
<rich:column >
<h:outputText value="URL" />
</rich:column>
<rich:column>
<h:outputText value="Actions" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:columnGroup>
<rich:column styleClass="style9"><h:outputText value="#{urlList1}" ></h:outputText></rich:column>
<rich:column>
<h:graphicImage value="../images/tab_actions_edit.gif" alt="Edit" />

</rich:column>
</rich:columnGroup>
</rich:dataTable>

The user can edit any row of the table.
When the user clicks on 'Edit ' button. Only the particular row should become editable. The url should be displayed in the editable format.

Can somebody suggest how it can be achieved.

Thanks in advance

[vgarmash]

If don't stick on Ajax this task become rather simple: you could just replace outputText elements in the some row with inputText ones using ActionListener on "Edit" link. You also should show "Save" button for this row. Then by ActionListener on "Save" button you could save data into Model layer and replace inputText elements back with outputTexts.

[dev_team]

Thanks a lot for your input.

I am new to JSF. It would be very nice if you can just detail out the Action Listener(replace outputText elements in the same row with inputText ones using ActionListener on "Edit" link).

Thanks once again for your time.

[ilya_shaikovsky]

The simpliest example I can provide after a few minutes of work under my excisting table :

<rich:dataTable value="#{capitalsBean.capitals}" var="cap">
 <rich:column>
 <a4j:outputPanel id="row1">
 <h:inputText value="#{cap.name}" rendered="#{cap.checked}"></h:inputText>
 <h:outputText value="#{cap.name}" rendered="#{not cap.checked}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>
 <rich:column>
 <a4j:outputPanel id="row2">
 <h:inputText value="#{cap.state}" rendered="#{cap.checked}"></h:inputText>
 <h:outputText value="#{cap.state}" rendered="#{not cap.checked}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>
 <rich:column>
 <h:selectBooleanCheckbox value="#{cap.checked}">
 <a4j:support event="onclick" reRender="row1,row2">
 <a4j:ajaxListener type="org.ajax4jsf.ajax.ForceRender"></a4j:ajaxListener>
 </a4j:support>
 </h:selectBooleanCheckbox>
 </rich:column>
 </rich:dataTable>

My bean is session scoped. (Or should be saved through keepAlive)

In general :
1) checkBox fire an ajax request. It inverts its state. And corresponding rendered attributes - changes to inverted,

So its pretty simple as you can see.