<h:form>
<p:dataTable var="btsEvent" value="#{eventController.eventsList}" rows="5"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:column id="Acknowledged" headerText="Acknowledged" >
<!-- conditional rendering -->
<p:graphicImage id="#{btsEvent.id}" value="resources/elements/confirm.png" rendered="#{btsEvent.ack}" />
<p:commandButton value="OK" id="AckButton" rendered="#{!btsEvent.ack}"
actionListener="#{btsEvent.getAcknowledgedOnClick(btsEvent.id)}"
styleClass="ui-priority-primary"/>
</p:column>
</p:dataTable>
</h:form>
I'm trying to assign a dynamic id to graphicImage in order to be able to catch it later with javascript and change its source attribute via btsEvent.getAcknowledgedOnClick(btsEvent.id). It seems that making dynamic id is not available here since I get "Empty id attribute is not allowed".
My goal is to reneder an OK image or a confirmation button that when clicked some code is executed and then another js code changes the image.
How do I assign dynamic id to the image or access corresponding graphicImage from getAcknowledgedOnClick function?
Other option is to have the button itself renedered as an image and change that image in code. How can I do that?
Related
i have a lazy loaded primefaces 8 datatable as follows:
<p:dataTable value="#{....model}" var="..." rows="20" lazy="true"
paginator="true" paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
emptyMessage="No records found">
....
</p:dataTable>
and a p:ajaxStatus defined as follows:
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()"/>
<p:dialog widgetVar="statusDialog" modal="false" draggable="false" closable="false" resizable="false"
showHeader="false"
styleClass="app-loader-dialog">
<div id="app-loader" class="app-loader">
<div class="app-loader-content">
loading...
</div>
</div>
</p:dialog>
The issue I noticed is that when paginating, the status dialog opens, but it stays open even after the pagination is complete, at which it is expected to hide.
But for other ajax activities such as dependent dropdown, etc. it shows and hides appropriately.
How can i resolve this?
I wrapped the dataTable in a h:form, and its working now.
I have a lazydatatable displaying thousands of cars. I ll have a buy button on the top of the page.
Basically, i want the user to buy all the cars visibles on the list when I press on the Buy Button. I m struggling to get a list limited to these cars.
How can I do?
xhtml
<p:dataTable var="car" value="#{carView.listCars}" paginator="true" rows="10" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink}
{LastPageLink}" rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{carView.selectedCar}" id="carTable" lazy="true">
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
CarService
public void buy{
...
}
CarView
public void init(){
LazyCarDataModel cars= restService.getCars();
}
Using a p:datatable in lazy mode, you provide the data for the 'visible' list via the load method in your LazyDataModel. So if you keep that list in one way or another on the server (e.g. storing it in a #Viewscoped bean`), it is available when you click 'buy'.
Another way is to support multiple selection and have a 'select all' toggle box at the top of the selection. And then use the selected files server side
How to unselected a selected row on a dataTable primefaces using only a click, the same way that it work to select the row.
This is the code I am using to select and unselect at the moment, but the unselect needs to press the Ctrl or CMD (on mac) key.
<p:dataTable
value="#{adminiClubReconManager.bankMovementsFound}" var="movs"
style="width:90%;border: 0px;"
selection="#{adminiClubReconManager.selectedBankMovement}"
rowKey="#{movs.id}" editable="true" styleClass="rowStyle"
paginator="true" rowsPerPageTemplate="5,10,15" rows="10"
selectionMode="mutiple"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
<p:ajax event="rowSelect"
listener="#{adminiClubReconManager.onBankRowSelect()}"
update="#form:reconMessages" />
<p:ajax event="rowUnselect"
listener="#{adminiClubReconManager.onBankRowUnselect()}"
update="#form:reconMessages" />
<p:column
style="background:transparent;border:0px;text-align:left">
<c:facet name="header">
<h:outputText
value="#{msg['admini.common.movement.recon.number']}" />
</c:facet>
<h:outputText value="#{movs.id}"
style="background:transparent;border:0px" />
</p:column>
...
</p:dataTable>
We've 2 possibilities for solve this issue.
First
Create commandButton and call primefaces method unselectAllRows();
<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
<p:commandButton widgetVar="buttonClear" value="Clear selection" onclick="dataTableWidgetVar.unselectAllRows();"/>
</p:dataTable>
After the click you have the rows deselected
Second
Via ajaxEvent call primefaces method unselectAllRows();
<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
<p:ajax event="page" update="dataTableId" oncomplete="dataTableWidgetVar.unselectAllRows();"/>
...
</p:dataTable>
In this case you selected the data of the first page when you click another page for example page 3, the ajax execute the method
UnselectAllRows (); And you clear you have selected.
For solve this i finded this material at primefaces forum in: https://forum.primefaces.org/viewtopic.php?f=3&t=24144
I use primefaces to display a list in a datatable with pagination.
The layout for the Page DropDown is not correct.
Screenshot:
How can I set this layout?
It now stretches along the whole width of the table. This is not good.
<p:dataTable id="dataTable" value="#{bean.lazyModel}" var="item"
paginator="true"
rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,50,100"
lazy="true"
selectionMode="single"
selection="#{orderEntrySearchBacking.selected}"
rowKey="#{item.id}">
<f:facet name="header">
Patients
<p:commandButton id="toggler" type="button" value="Columns"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler datasource="dataTable" trigger="toggler" />
</f:facet>
<p:column>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<h:outputText value="#{item.date}"/>
</p:column>
....
This problem is related to the {RowsPerPageDropdown}, but I can't get the style correct. Help is appreciated.
That's all folks!
It looks like your <select> element has style width: 100%.
Inspect dropdown and find where style rule come from.
To fix it you should override this rule. One of the ways is to add following style rule to your .css file.
select.ui-paginator-rpp-options{
width:auto;
}
I want to set something like this in the LazyLoading Datatable , I am not able to use the below code.
<p:dataTable var="studyPlanList" value="#{editBean.lazyModel}"
paginator="true" rows="10"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" selectionMode="single"
selection="#{editBean.selectedStudyPlan}"
id="studyPlanTable">
<p:ajax event="rowSelect" listener="#{editBean.onRowSelect}" update=":studyPlanEditForm:display" >
</p:ajax>
<p:column headerText="StudyPlan" sortBy="#{studyPlanList.name}" filterBy="#{studyPlanList.name}">
<h:outputText value="#{studyPlanList.name}"/>
</p:column>
</p:dataTable>
Instead of p:column , if it is h:link it is working, I want to achieve similar results;Please Help.
This is from the facelet tag documentation on f:setPropertyActionListener:
Register an ActionListener instance on the UIComponent associated with
the closest parent UIComponent custom action
So you need a triggering action to make it work. This could be a h:commandButton or h:commandLink. Here is a quick example:
<h:commandButton action="#{editBean.submitAction}" value="Select">
<f:setPropertyActionListener target="#{editBean.name}"
value="#{studyPlanList.name}" />
</h:commandButton>
Since you are using Primefaces, you could take a look at the row selection feature of p:dataTable. Here is an example from the showcase.
UPDATE:
The type of the selection should be the same as the type of your row element. I see from your code that selection="#{editBean.selectedStudyPlan.name}" but it should be
selection="#{editBean.selectedStudyPlan}"