I am trying to create OrderList with Primefaces.
This list would make possible changing order of items and allow setting some boolean with a checkbox. Changing the order is fine.
The problem is that every checkbox gets the same id.
When I am clicking on one of them, then the value of all of them change.
Here is my snippet:
<p:orderList id="OrderList" value="#{editBean.visibleitem}" var="item"
itemValue="#{item}" controlsLocation="left" responsive="true"
converter="converter">
<f:facet name="caption">
<div>
<div style="float: left">label</div>
<div style="text-align: right; padding-right: 15px">checkbox</div>
</div>
</f:facet>
<p:column style="width:80%">
<h:outputText value="item" styleClass="bst-text"/>
</p:column>
<p:column style="width:20%; text-align: center">
<p:selectBooleanCheckbox id="id_item"
valueChangeListener="editBean"
value="#{item.object.booleanObj}">
</p:selectBooleanCheckbox>
</p:column>
</p:orderList>
I will be happy if you could help me.
Greetings :)
It is an open enhancement request currently in PrimeFaces 6.2 found here:
https://github.com/primefaces/primefaces/issues/3781
I will see if we can get it implemented before the 7.0 release.
Thank you for your responses. I decided to redesign my UI and now I don't display checkboxes in OrderList Component.
Related
Primefaces 7 on JBoss 7.3
I have an application which allows users to click on entries in a datatable to display details of the entity in a dialog box:
<p:column headerText="XTAMessageID" id="msgIdCol" width="350" sortBy="#{nachricht.messageId}" styleClass="column">
<p:commandLink value="#{nachricht.messageId}" id="transportReportLink"
oncomplete="PF('transportDialogDC').show()"
action="#{detailController.showTransportReport(nachricht)}"
update="#form:transportDialogDC"></p:commandLink>
<p:tooltip for="transportReportLink" value="Transport Report anzeigen" position="top"></p:tooltip>
</p:column>
<p:dialog id="transportDialogDC" widgetVar="transportDialogDC" styleClass="messageDialog">
<p:growl life="10000"></p:growl>
<p>MessageId: #{detailController.messagedId} von: #{detailController.absender} an: #{detailController.empfaenger}</p>
<p:panelGrid columns="2" style="border-width:0px !important">
<p:panel style="padding: 0px; margin: 0px; border-width:0px !important">
<h4>Transport Report</h4>
<h:inputTextarea value="#{detailController.transportReportXML}" readonly="true" styleClass="messageDialogTextArea" cols="100" rows="25"/>
</p:panel>
…..
In Chrome this works, however in Firefox (98) sometimes the dialog is displayed empty without calling the detailController.showTransportReport(nachricht) method. Nothing happens in the backend....
This behavior persists for a few trials. After reloading the pages the dialog works again for a random number of times.
Any ideas what might cause this?
Thanks,
Hans
Good day
Is it possible (I seem to be stuck at not being able to click the 'tick' to accept a row edit) to use a Primefaces datatable to display the result of a non updateable Postgres view, but have custom code in the onRowEdit event that will persist the changes correctly to the DB?
Or MUST a Primefaces / JSF datatable be linked to an updateable entity mapping in order for it to be used to 'update' and display info?
I have in the .xhtml file this:
<p:dataTable id="conf_data_table" var="confRoomBookingDisplay" style="width: auto" rowIndexVar="rowid" editingRow="true"
value="#{conferenceRoomBookingView.conferenceRoomBookingList}" editable="true"
editMode="row" widgetVar="cellBookings">
<f:facet name="header">
Venue Booking
</f:facet>
<p:ajax event="rowEdit" listener="#{conferenceRoomBookingView.onRowEdit}"
update=":create_new_booking:growl"/>
<p:ajax event="rowEditCancel" listener="#{conferenceRoomBookingView.onRowCancel}"
update=":create_new_booking:growl"/>
<p:column headerText="Booking Ref" style="width: 10%; text-align: center">
<p:outputLabel value="#{ConferenceRoomBooking.conferenceRoomBookingAid}"
style="text-align: center"/>
</p:column>
<p:column headerText="Time Slot" style="width: 10%; text-align: center">
<p:outputLabel value="#{ConferenceRoomBooking.timeSlot}" style="text-align: center"/>
</p:column>
<p:column headerText="Booked For" style="width: 15%; alignment: center">
<p:outputLabel value="#{ConferenceRoomBooking.empShortNameSurname}"
style="text-align: left"/>
</p:column>
<p:column headerText="Booking Comment" style="width: 60%; alignment: center">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ConferenceRoomBooking.conferenceRoomBookingComment}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{ConferenceRoomBooking.conferenceRoomBookingComment}"
style="width:98%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width: 5%">
<p:rowEditor />
</p:column>
</p:dataTable>
And then on my #RequestScoped (javax.enterprise.context.RequestScoped) #Named backing bean (I tried it with a #ViewScoped - org.omnifaces.cdi annotation as well).
The event code looks like this:
public void onRowEdit(RowEditEvent event) {
conferenceRoomBookingAid = (((ConferenceRoomBookingEntity) event.getObject()).getConferenceRoomBookingAid());
String msgEdit = Long.toString(conferenceRoomBookingAid);
FacesMessage msg = new FacesMessage("Booking Edited for Reference ID:", msgEdit);
FacesContext.getCurrentInstance().addMessage(null, msg);
confRoomService.persistComment(How do I get my updated value from the event???);
}
public void onRowCancel(RowEditEvent event) {
conferenceRoomBookingAid = (((ConferenceRoomBookingEntity) event.getObject()).getConferenceRoomBookingAid());
String msgEdit = Long.toString(conferenceRoomBookingAid);
FacesMessage msg = new FacesMessage("Booking Cancelled for Reference ID: ", msgEdit);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
Currently commenting out the confRoomService.persistComment(How do I get my updated value from the event???); code, gets me to a properly rendered table where I am able to edit the row. The problem however is that I can not click the 'accept' / 'yes' tick with the mouse, and pressing enter just clears the cell again.
The reason I am using a non updateable view is that the current DB structure uses foreign keys to link the data to persons, and using the base entity will display the foreign key id instead of its value.
After a lot of different versions of Entities and database views, I came to the conclusion that the JSF / Primefaces datatable component is meant to be used:
When linked directly via an Entity that is mutable, and thus a 100% representation of the underlying database table, with no custom views of the data, full editing is allowed and works as advertised.
When linked to an Entity that is based on a Database View (updateable or not), the cells / rows of the datatable cannot be edited in the datatable cellEdit or rowEdit events.
I would be ecstatic if proved wrong on the above, but for now have made peace with using the datatable as immutable when based on a database view.
I use jsf with primefaces's graphicImage to show picture from a url,sometimes,it's work,and some time it show nothing.So i use developer tools and check it,and i found the src attribute append '?pfdrid_c=true' in the end,and if i remove it,it work.Then i try the img to replace graphicImage,it also appeared.Both of they are 400(bad request) in developer tools console,i'm sure the url is no problem,this is my code:
<p:dataTable value="#{myBean.urls}" var="url" emptyMessage=""
selection="#{myBean.selectedUrls}" rowSelectMode="checkbox"
style="text-align: center;" rowKey="#{url}">
<p:column selectionMode="multiple" style="width:16px;"/>
<p:column headerText="image" width="25%">
<p:graphicImage value="#{url}" width="64" height="64"/>
</p:column>
other colemns
</p:dataTable>
this is i use img element code,other things are the same:
<img alt="" src="#{url}" width="36" height="36"/>
what happend to it,how can i figure it out?
So I am attempting to pass object values from a bean into a primefaces datatable (using primefaces 3.4 currently), howevever I'm facing two problems with this.
1. I cannot seem to find any way to display (or represent) a boolean value within a column in a datatable. Every time I attempt this, the table returns back totally empty (even though without the boolean column the other columns are populated with data from the bean).
2. The other bigger problem (more to do with java I think than primefaces) is that I have currently 26 different Objects I get from Siebels CRM ONDemand cloud solution, each containing their own datatypes and attribute values. I cannot for the life of me figure out how to, based on a drop down selection of a specific object display that objects fields dynamically within a primefaces datatable. So far I have just managed to display some of the fields for 1 of these objects as a sort of prototype but I am having the problem with the boolean value being display also its a nightmare.
Anybody have any sort of similar experiences ? or suggestions? I've been puzzled by this for over 2 weeks now and I am going absolutely crazy!
I can provide code examples or other details if needed :)
Thanks a lot I really appreciate any help !
Reggie
Html code:
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:panel header="OD Object Selection" style="margin-bottom:5px;">
<h:panelGrid columns="2" cellpadding="5">
<p:selectOneMenu immediate ="true" id="pickList" value="#{ODComBean.fieldSetData}" effect="fade" style="font-size: 12px; font-family:sans-serif;" >
<f:selectItems value="#{ODComBean.fieldSet}" itemLabel="#{fieldSet.objectName}" var="fieldSet"/>
<p:ajax event="change" update="#form" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:column headerText="Type" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.fieldType}"/>
</p:column>
<p:column headerText="Required">
<p:graphicImage value="/resources/images/tick.png" rendered="#{tableFieldSet1.readOnly}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not tableFieldSet1.readOnly}"/>
</p:column>
<p:column headerText="Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.name}"/>
</p:column>
<p:column headerText ="Display Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.displayName}"/>
</p:column>
<p:column headerText="Default Value" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.defaultValue}"/>
</p:column>
<p:column headerText="Generic Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.genericIntegrationTag}"/>
</p:column>
<p:column headerText ="Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.integrationTag}"/>
</p:column>
<p:column headerText ="Translations" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.listOfFieldTranslations}"/>
</p:column>
<p:column headerText ="Validation Error" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.validationErrorMsg}"/>
</p:column>
<!-- When I add the next Column it will only show data for the first line, and display a <div half tag in the last column... strange... !-->
</p:dataTable>
</p:panel>
if you want to use a h:outputText, you can set its converter to something that you implemented and inside that converter, decide about the display value.
Otherwise, if you like to view an icon according to the value,
you can do like this :
<p:column headerText="My Boolean Value">
<p:graphicImage value="/resources/images/tick.png" rendered="#{MODEL.boolean}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not MODEL.boolean}"/>
</p:column>
I hope this is helpful :)
Output panel with layout set to inline produce a <span> tag with the style class you provide.
You can for example use the jquery-ui icons provided by the framework. Like this:
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-check" rendered="#{project.inBudget}" />
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-close" rendered="#{!project.inBudget}" />
You could simply use a check mark symbol for true and empty String, or x symbol for false.
<p:column headerText="Required" style="text-align: center">
<h:outputText value="#{tableFieldSet1.readOnly ? '✓' : ''}"/>
</p:column>
Is there any way to implement a scrollable datatable without using Rich Faces ? If there is can anyone point me to some code samples or example pages ? Thanks.
Use div component for scrollable datatable in jsf and mention
properties height: 200px; overflow: auto; in style attribute.
<div style="height: 200px; overflow: auto;">
<h:dataTable value="#{facesBean.files}" var="file">
<h:column>
<f:facet name="header">
<h:outputText value="Image"></h:outputText>
</f:facet>
<h:graphicImage value="#{files.image}" style="width:100px; height:100px;"></h:graphicImage>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Description"></h:outputText>
</f:facet>
<h:outputText style="font-weight:bold;" value="File Name:"></h:outputText>
<h:outputText value="#{file.alt}"></h:outputText>
</h:column>
</h:dataTable>
</div>
This can be achieved via CSS. You must use the css property overflow:scroll or overflow-x and overflow-y. But take note that different browsers treat this property differently so you it may result to different behavior.
You make a h:dataTable wrap inside a div.
Change the property of the div using css and add overflow property to scroll.
Make sure that your table has a fixed sized.
You may want to look at this
http://anaturb.net/csstips/sheader.htm
-cheers :)