I have a simple Richfaces 4 <rich:dataTable> with some <rich:column>s.
Now I want if I press on one row, that below the table the ID of the row should be displayed.
Here is what I did so far:
<rich:dataTable value="#{placeholder_control.lichtList}" var="licht" width="100%" id="lichtListe" columns="2">
<rich:column>
<f:facet name="header">
<h:outputText value="Beschreibung" />
</f:facet>
<h:outputText value="#{licht['beschreibung'].stringValue}" width="20" />
<a4j:ajax immediate="true" event="onclick" render="testingID" listener="#{placeholder_control.selectActiveLight}">
<f:attribute name="rowKey" value="#{licht['id'].stringValue}" />
</a4j:ajax>
</rich:column>
...
...
<h:outputText value="This is the id : #{placeholder_control.selectedLight}" id="testingID"></h:outputText>
The managed bean placeholder_control looks like this
#ManagedBean (name="placeholder_control")
#SessionScoped
public class ControlPlaceholder {
public void selectActiveLight(ActionEvent evt) {
String selectedRow = (String) evt.getComponent().getAttributes().get("rowKey");
System.out.println("Selected Light : " + selectedRow);
setSelectedLight(selectedRow);
}
Everything will be rendered correctly, but if I click on the row (on this column), nothing happens. I also tried to put a non existing method (on purpose) to the listener. I hoped that I get an error message but nothing happend.
If I look at the HTML source code, there is nothing with onclick at that <td> element.
Anyone has an idea?
hi friend take a look to rich:extended datatable, i used it to do a task that meet your requirements.
here is the showcase for richfaces 4 and explains the use of extended datatable: http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=extendedDataTable&sample=exTableSelection&skin=blueSky
cheers
Related
In an edit screen, I'm using p:ajax to grab the selected value in an autocomplete field and fill in other fields in the form. But when ajax is running in question it is updating the information in the database table (update). How do I block this behavior? After all I should only do this when I clicked the save button.
Code:
<h:panelGroup>
<p:autoComplete id="demandaBeanDemandaLogradouroNome" value="#{demandaBean.demanda.logradouro}"
var="_item" minQueryLength="3" maxResults="15" required="true"
itemLabel="#{_item.nome}" itemValue="#{_item}" converter="#{logradouroBean.converter}"
completeMethod="#{logradouroBean.buscaLogradouro}" title="Busca pelo Logradouro">
<p:column>
<h:outputText value="#{_item.categoria.descricao}"/>
</p:column>
<p:column>
<h:outputText value="#{_item.nome}"/>
</p:column>
<p:ajax partialSubmit="true" immediate="true" event="itemSelect" update="demandaBeanDemandaBairro demandaBeanDemandaCruzamento"
listener="#{logradouroBean.buscaComplementoSelectEvent}"/>
</p:autoComplete>
<p:message for="demandaBeanDemandaLogradouroNome" styleClass="error"/>
</h:panelGroup>
I have found that what happens is that Hibernate synchronizes the persistent objects and if you change it it automatically updates in the database. To solve, I used an auxiliary object with the #Transient tag. Thanks.
I have a primefaces datatable with cell editing which is toggled on a boolean variable in the view.
I have three issues:
In edit mode, I change a value and I click the save button on the page it doesn't keep the new value, If I click anywhere else first on the page then click save it will keep the value. I need it to keep the value if you click save first.
If I edit a cell which is an input text and I click out the field now is a output text until I click in there again. I want the field to look like a input text while in edit mode.
When the save button is clicked the backing method sets the editable boolean to false, and the rest of the page obeys, and the dataTable looks like it obeyed but if you click a cell it will let you edit it.
Here is the code:
<p:dataTable value="#{view.LineItems}" var="lineItem" rowKey="#{lineItem.lineItemId}"
resizableColumns="false" editable="#{view.editable}" editMode="cell"
editingRow="#{view.editable}" id="requestLineItemsTable">
<p:ajax event="cellEdit" listener="#{view.cellEdited}" immediate="true" update="#this" />
<p:column styleClass="centerColumnData" headerText="Item Name" style="width: 140px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{lineItem.title}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{lineItem.title}"/>
</f:facet>
</p:cellEditor>
</p:column> ...
and this is the back end (not doing anything with this yet)
public void cellEdited(CellEditEvent event)
{
Object oldValue = event.getOldValue();
}
and here is the save and edit buttons on the same .xhtml page as datatable
<p:commandLink process="#this"
action="#{view.changeModeToEdit}"
update="#form"
rendered="#{!view.editMode">
<h:graphicImage library="images" name="edit20.png" title="#{__Common.edit}"
style="height: 15px; width: 15px;"/>
</p:commandLink>
<components:linkWithSpinner linkStyle="margin-right: 20px;" loadingImageStyle="margin-right: 20px;"
linkStyleClass="activeButton saveButtonRequestDetails" loadingImageStyleClass="saveButtonRequestDetails"
linkText="#{__CommonButton.save}"
process="#form" update="#form"
actionMethod="#{view.updateRequest()}"/>
view.updateRequest() sets the editable to false. I am using Primefaces 4.0
So I figured out a way around these issues. I was focused on using the built in edit table , but you can just have a normal datatable and the columns can contain input text fields. Then you don't have to worry about most of the issues in my question above. If you need to switch between edit and non-edit view then I still don't know how to fully fix it except have two datatables in your file with render tags, but then you are duplicating the table one with input text fields and one with output text fields, and that is not the best way to do it.
How do I do to get the selected data that dataTable? I use this way because it is the "Edit" of a register.
<p:dataTable id="dataTable" var="valor" style="width:100%; text-align:center"
value="#{beanMensagemXContato.dataModelMsg}"
selection="#{beanMensagemXContato.selectedMensagemAssociada}"
paginator="true" rows="6" >
<f:facet name="header">
Mensagens
</f:facet>
<p:column style="width:5%">
<p:selectBooleanCheckbox value="#{valor.associada}" >
<p:ajax process="#form" event="valueChange" listener="# {beanMensagemXContato.adicionarMensagemContato}">
<f:param name="messageSelecionada" value="#{beanMensagemXContato.msgAssociada}" />
</p:ajax>
</p:selectBooleanCheckbox>
</p:column>
...
</p:dataTable>
I would pick the data by Bean as the event SelectEvent:
public void adicionarMensagemContato (SelectEvent event){
Mensagem mensagem = ((MensagemAssociada) event.getObject()).getMensagem();
MensagemAssociada mensagemAssociada = (MensagemAssociada) event.getObject();
...
}
But I could not take the data with the event ValueChange. I've tried with SelectEvent by tag selectionMode = "multiple", managed to get the data selected at that moment, the data previously selected and read from the database does not appear, use only when the way listed above in xhtml.
Already I appreciate the help.
The selection is stored in your bean field:
selection="#{beanMensagemXContato.selectedMensagemAssociada}"
If the adicionarMensagemContato method is located in the same bean, you can access you selection without a problem:
public void adicionarMensagemContato (SelectEvent event){
doSomething(this.selectedMensagemAssociada);
}
Another way is to use f:setPropertyActionListener - it allows you to store element from current row in a bean field (example below shows how to access current element in action invoked by button click):
<p:dataTable var="objectFromCurrentRow" ...>
...
<p:column ...>
<p:button ... action=#{beanMensagemXContato.performAnActionOnCurrentElement} ...>
<f:setPropertyActionListener value="#{objectFromCurrentRow}" target="#{beanMensagemXContato.selectedMensagemAssociada}" />
</p:button>
...
We have a old application running with JSF 1.1, cannot upgrade due to client specification.
I would like to know is it possible to have a datatable with JSF 1.1 and upon clicking a button or link in datatable row open a dialog popup and do CRUD operation?
Thanks
Edit 1
I guess Apache Trinidad supports JSF 1.1. Can I do CRUD operation with Trinidad?
I think using Richfaces 3.1.6 (JSF 1.1 compatible) with the great A4J, will help you doing so:
<h:form id="myForm">
<rich:dataTable width="100%" style="border:none;margin-left:15px;" id="tableId" columnClasses="colClass"
value="#{managedBean.someList}" var="someVar">
<h:column> some content for this column </h:column>
<h:column>
<a4j:commandLink styleClass="linkClass" value="Delete" reRender="myForm:myModal" ajaxSingle="true" oncomplete="#{rich:component('myForm:myModal')}.show()" actionListener="#{managedBean.someMethodToUpdateDTO}">
<a4j:actionparam value="#{someVar.idForExample}" name="someName" assignTo="#{managedBean.someDTOObjectToBeUpdated.id}"/>
</a4j:commandLink>
</h:column>
</rich:dataTable>
<rich:modalPanel id="panel" width="350" height="100">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Are you really, really sure to delete this one!!! #{managedBean.someDTOObjectToBeUpdated.name}"></h:outputText>
</h:panelGroup>
</f:facet>
<a4j:commandButton styleClass="btnClass" value="Oui" ajaxSingle="true" oncomplete="#{rich:component('myForm:myModal')}.hide()" reRedner="myForm:tableId" action="#{managedBean.deleteIt}">
</rich:modalPanel>
</h:form>
someMethodToUpdateDTO is a method, in your managed bean that looks like this:
public void someMethodToUpdateDTO(ActionEvent event){
//In this method I just load the object from somewhere else
someDTOObjectToBeUpdated = someDAO.getObject(someDTOObjectToBeUpdated.getId());
//someDTOObjectToBeUpdated is an attribute of your managed bean, of course with its getter and setter
}
Hope this helps,
Cheers
Richfaces 3.3.3, Jsf 1.2:
I have a a4j:form that uses some simple validation, mainly required="true" to ensure the form does not get submitted without some necessary data.
I also have some complex data to add (optionally) to the form, so I thought the best way to do this is to have a a4j:commandButton that displays a rich:modalPanel where the user can create the complex data set.
The created data is also displayed in a h:selectManyListbox that is reRendered when the modalPanel is closed.
That's the plan, at least. I have the following problems:
reRender works, but only if I prevent validation via immediate="true" - which in turn seems to prevent the selected data from the modalPanel to be present in the backing Bean
if I remove the immediate tag, the data gets updated, but only if there are no validation errors
What is the best way to get this to work the way I want? Is there another, better way?
UPDATE:
The Validation that fails is in some different part of the form, not in the data entered via the modalPanel, which is displayed in the Listbox
CODE:
modalPanel:
<rich:modalPanel id="addTrimming" domElementAttachment="parent" width="150" height="130">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Define Filter" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelinkAddTrimming"/>
<rich:componentControl for="addTrimming" attachTo="hidelinkAddTrimming" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:panelGrid id="trimsettings" columns="3">
<h:outputText value="Target:" style="font-weight:bold"/>
<h:inputText id="target" label="XML Filename" required="true" value="#{xmlCreator.trimTarget}">
</h:inputText>
<h:outputText value=""/>
<h:outputText value="Mode:"/>
<h:selectOneMenu value="#{xmlCreator.trimMode}">
<f:selectItem itemLabel="Quality" itemValue="quality"/>
<f:selectItem itemLabel="after Primer" itemValue="afterPrimer"/>
<f:selectItem itemLabel="fixed" itemValue="fixed"/>
<f:selectItem itemLabel="Median length" itemValue="median"/>
<f:selectItem itemLabel="Motif" itemValue="motif"/>
</h:selectOneMenu>
<h:outputText value=""/>
</h:panelGrid>
<h:panelGroup>
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" onclick="from:submit()">
<a4j:support event="oncomplete" ajaxSingle="true" immediate="true" reRender="trimsPanel"/>
</a4j:commandButton>
</h:panelGroup>
</rich:modalPanel>
relevant form part:
<h:outputText value="Trimming:"/>
<a4j:outputPanel id="trimsPanel">
<h:selectManyListbox id="trims" value="#{xmlCreator.selectedTrimmings}">
<f:selectItems value="#{si:toSelectTrimmingList(xmlCreator.trimmings)}"/>
</h:selectManyListbox>
</a4j:outputPanel>
<a4j:commandButton id="addTrimButton" immediate="true" value=" + Trimming">
<rich:componentControl for="addTrimming" attachTo="addTrimButton" operation="show" event="onclick"/>
</a4j:commandButton>
If you do it in one form than you should separate it into two: one will be your main form and another will be form inside modal panel. Thus you'll be able to submit modal panel independently of main form and your submit button in modal panel will look like this:
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" reRender="trimsPanel"/>
you should use process with immediate to send modalpanel's data to bean when closing panel with a a:commandButton or a:commandLink.
for this, modal panel data has to be valid as expected, so you will get valid new data and add it to h:selectManyListBox 's bean value and reRender h:selectManyListBox.
this should work. if not please post your a:form and modalPanel code full to check.