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.
Related
I'm using a Primefaces columnToggler to dynamically hide/display columns in a data table. This is working as expected, however I would like to remove items from the togglers checklist, so the user cannot check/uncheck them.
relevant code:
button and columnToggler
<p:commandButton id="toggler"
type="button"
value="Columns"
title="Show/Hide columns"/>
<p:columnToggler datasource="my_datatable"
trigger="toggler" />
dataTable
<p:dataTable value="#{bean.foobars}" var="fb"
id="my_datatable"> ...
column to show (working as expected)
<p:column headerText="Data One" >
<h:outputText value="#{fb.data1}"/>
</p:column>
column to hide from columnToggler checklist (how do I do this?)
<p:column headerText="Always Available" >
<h:outputText value="#{fb.mustSeeField}"/>
</p:column>
I was hoping to find an attribute on p:columnToggler for 'locked' or 'always on' fields, or possibly an attribute on p:column to remove it from the columnToggler checklist. Unfortunately I'm not sure how to do this, or if it's possible. Thoughts? Solutions? thank you!
PrimeFaces has a toggleable attribute on the p:column as can be seen in the PrimeFaces 6.1 documentation on page 110. So
<p:column headerText="Always Available" toggleable="false">
<h:outputText value="#{fb.mustSeeField}"/>
</p:column>
Should do the trick
The java code returns a column from a SQL query and if the item isn't null, sets the title to "Available".
String sppAcronym = results.getString("ACRONYM");
if (sppAcronym != null) {
sp.setFireStudyTitle("Available");
}
The JSF code makes a button labeled "Available" for all of the non-null items.
<h:column headerClass="columnHeader" footerClass="columnFooter" itemValue="0">
<f:facet name="header">Link to FEIS Fire Studies</f:facet>
<h:commandButton id="btnSearch" value="#{SPP.fireStudyTitle}"
action="#{searchBean.doMagic(SPP.acronym)}"
immediate="true" onchange="submit();"
style="font-weight:bold; font-size:small;"
onclick="javascript:cursor_wait()" class="buttonsFEIS"/>
</h:column>
My problem is that JSF makes small, empty commandButtons even for the null items.
How can I make it so I can hide those empty commandButtons and display only the non-null items?
Use rendered attribute of the <h:commandButton> to control if the component must display or not in the generated HTML:
<h:commandButton id="btnSearch" value="#{SPP.fireStudyTitle}"
action="#{searchBean.doMagic(SPP.acronym)}"
immediate="true" onchange="submit();"
style="font-weight:bold; font-size:small;"
onclick="javascript:cursor_wait()" class="buttonsFEIS"
rendered="#{not empty SPP.acronym}" />
I have a menu with list items and a p:commandLink inside. While using this for different pages I realized that I have problems updating form with a p:dataTable and p:columns inside. After clicking on the link, form2 which actually has some panels and the table inside should be updated. Now my problem: Only most of the content in form2 is updated correctly, but the p:columns have the old value. If I click again on the link, the correct values are shown.
The bean method public void selectProject(Project myProject) is called correctly and the values are correctly processed.
Now the strange thing: If I add a h:graphicImage with a p:ajax everything works fine!!
<h:form id="form1">
...
<li>
<p:commandLink update=":form2" actionListener="#{bean.selectProject(p)}">
<h:outputText value="#{p.name}" />
</p:commandLink>
<!-- Code below is for testing only, but works fine! -->
<h:graphicImage value="#{iconBean.icon(12,'clock')}">
<p:ajax event="click" update=":form2" listener="#{bean.selectProject(p)}"/>
</h:graphicImage>
</li>
...
</h:form>
Update This does not seem to be related to p:columns, a simplified test case shows the expected behavior of p:commandLink. In the original (still failing) setting the menu is implemented as a composite component.
As a workaround I use
<h:commandLink>
<h:outputText value="#{p.name}"/>
<p:ajax event="click" update=":form2" listener="#{bean.selectProject(p)}"/>
</h:commandLink>
I have a problem regarding jsf autocomplete elements. I want my page to have an autocomplete element and after a user selects a value from the field, another field is automatically created. The maksimum number of autocomplete field is 3, so after the 3rd one, the 4th one is disabled:
<h:outputLabel for="fieldsOfStudy" value="#{amsg.fieldsOfStudy}"/>
<p:outputPanel id="fieldsOfStudy" autoUpdate="true" layout="block">
<ui:repeat value="#{cc.attrs.offer.fieldsOfStudy}" var="studyField" varStatus="status">
<h:panelGroup id="studyField" layout="block">
<h:outputText value="#{amsg.handleGetObject(enumHelper.toMessageKey(studyField))}"/>
<p:commandLink action="#{cc.attrs.offer.removeFieldOfStudy(status.index)}" process="#this"
update="#([id$=fieldsOfStudyAutocomplete])" styleClass="ui-icon ui-icon-close"/>
</h:panelGroup>
</ui:repeat>
</p:outputPanel>
<h:message for="fieldsOfStudy" errorClass="error"/>
<h:panelGroup id="fieldsOfStudyAutocomplete">
<p:autoComplete value="#{offerBean.selectedFieldOfStudy}" dropdown="true" required="#{empty cc.attrs.offer.fieldsOfStudy}"
completeMethod="#{offerBean.completeFieldsOfStudy}" disabled="#{cc.attrs.offer.fieldsOfStudy.size() >= 3}"
itemValue="#{p}" var="p" itemLabel="#{amsg.handleGetObject(enumHelper.toMessageKey(p))}" styleClass="xLargeInput">
<p:ajax event="itemSelect" process="#this" update="#this"/>
</p:autoComplete>
</h:panelGroup>
Everything works good like this, but the problem is that every time a user presses the Save button if the "Field of study" list has 1 selected element from the autocomplete there will be another one in the list with a null value. If there are 2 selected "field of studies" the 3rd one will be also created but ill have a null value. If there are 3 selected "fields of studies", then there wont be any 4th element in the list.
Is there any way I can set the autocomplete to ignore null fields? In other words, if a user doesnt select anything from the autocomplete, how not to pass null values to the DTO?
I found a way. When setting up the value in the bean you can easily put an if statement like this:
public void setSelectedFieldOfStudy(FieldOfStudy selectedFieldOfStudy) {
if (selectedFieldOfStudy != null) {
this.emptyOffer.getFieldsOfStudy().add(selectedFieldOfStudy);
}
}
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