Example with source code for using ajax4jsf with DataTable

[sreejag]

Hi all,
Can you point me to an example where i can update a single row of a datatable (including dropdowns) when the user tabs out of a input text box?

I am using IBM JSF implementation 1.1

currently i am using a ValueChangeListener for "onblur" of the text field.

Any help would be greatly appreciated.

Thank you,
Sree

[sreejag]

here's what i want :

<h:dataTable id="ps" width="200" value="#{pBO.model}" binding="#{pBO.modelTable}" var="item" rows="50">
 <h:column>
 <f:facet name="header">
<h:outputText styleClass="outputText" value="Account" id="text2"></h:outputText>
 </f:facet>

 <h:inputText styleClass="inputText" id="accountNbr" value="#{item.accountNbr}" size="10">
</h:column>
<h:column>
 <f:facet name="header">
<h:outputText styleClass="outputText" value="County" id="text13"></h:outputText>
 </f:facet>
 <h:selectOneMenu styleClass="selectOneMenu" id="county" value="#{item.county}">
<f:selectItems value="#{item.counties}" />
 </h:selectOneMenu>
 </h:column>

Now, when the user enters an account number i have to retrieve all the info related to that account and update that particular row of the dataTable.

The counties LIST should depends on the account number.

In my backing bean i have a method "getAccountDetails" that retrieves all the information related to that account.

how can i used a4j in this scenario and update the entire row including the dropdowns?

thanks for the help.

[sreejag]

Someone help me please!!!

[sergeysmirnov]

Sounds like an example from my unfinished yet article:
http://livedemo.exadel.com/richfaces-art-datatable/pages/example10.jsf

The source code is linked there:
http://labs.jboss.com/wiki/RichFacesArticleDataTable

The example show the situation when the drop-down-box has a validation on it. If not, the code will be much simple.

[sreejag]

Do we need to use <rich:dataTable> for this?

can we use <h:dataTable> or <a4j:repeat> (i haven't used <a4j:repeat till now)

Thanks
Sree

[sergeysmirnov]

I am not sure about h:dataTable. May be it will work with additional listener. a4j:repeat should work.

[sreejag]

Sergey,
In your updateBean.change() method, you are not updating any of the other field values.

Let's say i want to retrieve the values of other columns, then what should i update?

Should i update the entire DataTable? I am confused. Please help.

Thank you,
Sree

[sergeysmirnov]

The example shows the case when one input component (drop down box) has a validator that does not allow to submit the empty value. If you has no such case, the code will be much simple (without immediate attribute and additional bean)

[sreejag]

Yes Sergey, I need not validate any values. I just need to retrieve that particular row's information. can you show me an example on how to do that.

thank you
Sree

[sergeysmirnov]

There is a second table on this example. Did you look at it?

[sreejag]

in the second example, where does the form submit to? i mean to which method in the backing bean?

[sergeysmirnov]

I am a little bit confused about the terminology here. Why the form should submit to something. JSF is not a Struts where form is linked with action. Could you clarify.

[sreejag]

Sergey,
Thanks for bearing with me :)

in the first example:

<rich:dataTable value="#{salesReport.items}" var="item">
 <f:facet name="header">
 <rich:columnGroup>
 <h:column>
 <h:outputText value="Product Code" />
 </h:column>
 <h:column>
 <h:outputText value="Proposed Price" />
 </h:column>
 <h:column>
 <h:outputText value="Sales Cost" />
 </h:column>
 <rich:column style="width:150px">
 <h:outputText value="Reason" />
 </rich:column>
 <h:column>
 <h:outputText value="Proposed Gross Margin" />
 </h:column>
 </rich:columnGroup>
 </f:facet>
 <h:column>
 <h:outputText value="#{item.productCode}" />
 </h:column>
 <h:column>
 <h:inputText binding="#{updateBean.priceRef}" immediate="false" value="#{item.proposedPrice}" size="7">
 <a4j:support immediate="true" action="#{updateBean.change}" event="onchange" reRender="margin,reason" />
 </h:inputText>
 </h:column>
 <h:column>
 <h:outputText value="#{item.salesCost}" />
 </h:column>
 <h:column>
 <h:selectOneMenu id="reason" required="true" value="#{item.reason}">
 <f:selectItems value="#{item.reasons}" />
 </h:selectOneMenu>
 </h:column>
 <h:column>
 <h:outputText id="margin" value="#{item.proposedGrossMargin}">
 <f:convertNumber pattern="$###0.000" />
 </h:outputText>
 </h:column>
 </rich:dataTable>

how are you updating the dropdown? i don't see any updates in "UpdateBean.change()" method.

[sergeysmirnov]

The reRender point to the dropdown like this:

a4j:support immediate="true" action="#{updateBean.change}" event="onchange" reRender="margin,reason" />

<h:selectOneMenu id="reason" required="true" value="#{item.reason}">
<f:selectItems value="#{item.reasons}" />
</h:selectOneMenu>

On the RENDER RESPONSE phase, the getter of #{item.reasons} is invoked and actual list of options is shown.

[sreejag]

That's exactly my question Sergey.

In the "change()" method, you are not updating the selectItems.
And how is that particular row's DTO is being updated and how is it known to the AJAX tag.