I have a treeTable where I have to set on the first column a Radionbutton.
the RadionButton is not linked to the treeTable.
I tried with the selectionMode but in vain.
If you have any idea, please share it with me.
Thanks in advance :)
My treeTable should look like this :
here is the code I used :
<p:treeTable value="#{treeBouchon.racine}" var="ligneBudgetaire"
selection="#{treeBouchon.ligneBudgetaireselectionnee}"
selectionMode="single" rowKey="#{ligneBudgetaire.id}">
<p:column selectionMode="single">
</p:column>
<p:column headerText="Ligne budgétaire">
<h:outputText value="#{ligneBudgetaire.filed1}" />
</p:column>
<p:column headerText="ETP reçus">
<h:outputText value="#{ligneBudgetaire.filed2}" />
</p:column>
<p:column headerText="ETP émis">
<h:outputText value="#{ligneBudgetaire.filed3}" />
</p:column
</p:treeTable>
Related
I have this problem, and I don't understand why...I used it all the time in this way
<p:dataTable id="datatable" var="ligne" value="#{ficheMB.lignes}"
selection="#{ficheMB.selectedLignes}" rowKey="#{ligne.id}" >
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="Article">
<h:outputText value="#{ligne.article.nom}" />
</p:column>
<p:column headerText="Tarif">
<h:outputText value="#{ligne.article.tarif}" />
</p:column>
this is the error
javax.faces.FacesException: DataModel must implement org.primefaces.model.SelectableDataModel when selection is enabled.
at org.primefaces.component.datatable.DataTable.getRowKeyFromModel(DataTable.java:1409)
at org.primefaces.component.datatable.DataTableRenderer.encodeRow(DataTableRenderer.java:1244)
at org.primefaces.component.datatable.DataTableRenderer.encodeRows(DataTableRenderer.java:1184)
thank you for your help
So, I've used example from showcase of PrimeFaces https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml. That's my code:
<div class="page_content">
<div class="header">Очередь рассылок</div>
<script type="text/javascript">
function handleDrop(event, ui) {
var droppedEmail = ui.draggable;
droppedEmail.fadeOut('fast');
}
</script>
<h:form>
<p:fieldset id="availableEmailsField" legend="Доступные рассылки">
<p:dataTable id="availableEmails" var="email" value="#{emailingQueueUI.customEmails}">
<p:column style="width: 20px;">
<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
<p:draggable for="dragIcon" revert="true" helper="clone"/>
</p:column>
<p:column headerText="ID">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:fieldset>
<p:outputPanel id="selectedEmailsField">
<p:outputPanel id="dropArea">
<h:outputText value="Переместите сюда c доступных рассылок" rendered="#{empty emailingQueueUI.customEmailQueue}" style="font-size:16px;" />
<p:dataTable id="selectedEmails" var="email" value="#{emailingQueueUI.customEmailQueue}" rendered="#{not empty emailingQueueUI.customEmailQueue}"
rowIndexVar="index">
<!--<p:ajax event="rowReorder" listener="#{emailingQueueUI.onQueueReorder}" update=":form" />-->
<p:column headerText="Номер в очереди">
<h:outputText value="#{index}"/>
</p:column>
<p:column headerText="Рассылка">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:outputPanel>
<p:droppable for="selectedEmailsField" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableEmails" onDrop="handleDrop">
<p:ajax listener="#{emailingQueueUI.onEmailDrop}" update="dropArea availableEmails" />
</p:droppable>
</h:form>
</div>
There is a problem with d&d, I can drag and drop only one element from "availableEmailsField". When I try to drop another element it removes previous element and adds the dropped one.
I think the problem is in your bean.
Make sure that you initialize customEmailQueue inside #PostConstruct method and use the proper bean scope. In this case #ViewScoped.
It seems that an update function must be setted correctly in order to work properly. I faced the same issue and discovered that the ajax inside dropable has to update all drag-drop area elements, it seems that this action solves the issue.
The solution that worked is to put inside your form an:
<h:panelGroup id="elementsPanel">
....
...
...
...
....
</h:panelGroup>
, surrounding all drag-drop elements (if you dont want a panelgroup the idea is to update all the components)
and on the dropable update this panel:
<p:droppable id="dropHandler" for="selectedTable" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="myDataSource" onDrop="handleDrop">
<p:ajax listener="#{dimensionsClass.onDimensionDrop2}" update="elementsPanel" />
</p:droppable>
I hope that helps!
I am using PF 5.3, on (weblogic 11g/jsf2.0/java 1.6).
I thought the issue of not shown emptyMessage in Datatable is fixed in 5.3, but inspite of using the latest version, i still dont see the message. Below is my sample code.
<p:dataTable id="attaDt" var="fileRow" value="#{pendpaybean.selectedPayDetailsFiles}"
rowIndexVar="rowIndex"
emptyMessage="No Files Uploaded"
>
<p:column headerText="Uploaded Date"
width="15px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By"
width="30px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:datatable>
Any help ?
Your code works well. NOTE I put attribute value to null for showing emptyMessage.
Your adapted code:
<h:body>
<h:form>
<p:dataTable id="attaDt" value="#{null}" var="fileRow" rowIndexVar="rowIndex" emptyMessage="No Files Uploaded">
<p:column headerText="Uploaded Date" width="15px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By" width="30px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
can we do a internal sorting in primeface datetable ? If i have column a ,b ,c. can i sort the column c and then internally by column b in p:dataTable.
<h:form>
<p:dataTable var="car" value="#{tableBean.carsSmall}">
<p:column headerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="a">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="b">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column headerText="c">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
Yes, you can. http://www.primefaces.org/showcase/ui/datatableSortingMultiple.jsf
P.S Don't forget pressing CTRL or Cmd :)
I am trying to use the p:rowToggler and p:rowExpansion in my datatable. It was working fine on primefaces 3.2, recently i upgraded to primefaces 3.5. Since then it is not working. Following is the datatable with roToggler and rowExpansion
<p:datatable value="#{myBean.valueList}">
<p:column>
<p:rowToggler/>
</p:column>
<p:rowExpansion>
...
</p:rowExpansion>
</p:datatable>
Any help would be appreciated
Thanks
Praveen
Please try as below,
<p:dataTable var="education"
value="#{backingBean.schoolList}"
reflow="true"
paginator="true"
sortMode="multiple"
emptyMessage="No records found."
rows="#{backingBean.rowsPerPage}">
<p:column headerText="Details" styleClass="Wid10">
<p:rowToggler expandLabel="Show" collapseLabel="Hide" icon="ui-icon-close"/>
</p:column>
<p:column headerText="Center">
<h:outputText value="#{education.centerName}"/>
</p:column>
<p:column headerText="Address">
<h:outputText value="#{education.addr}" />
</p:column>
<p:rowExpansion>
<p:outputLabel value="Course: " styleClass="FontBold" />
<BR />
<h:outputText value="#{education.course}" />
<Br />
<p:outputLabel value="Details: " styleClass="FontBold" />
<BR />
<h:outputText value="#{education.details}" />
</p:rowExpansion>
</p:dataTable>