I am using buttons in a p:datatable and they are triggering a p:blockUI (PF 6.0)
When located in the footer of my datatable, the button does trigger the blockUI. When moved into a column, it does not trigger it
BlockUI
<p:blockUI block="blockPanel"
trigger="myForm:myTable:myButton myForm:myTable:myButton2">
Loading..<br />
<p:graphicImage name="images/loading_blue.svg" />
</p:blockUI>
Datatable
<p:panel id="blockPanel">
<h:form id="myForm">
<h:panelGrid columns="1" cellpadding="5">
<p:dataTable id="myTable" value="#{modelBean.myList}" var="entry">
<!-- Some data -->
<p:column headerText="Name">
<h:outputText value="#{entry.name}" />
</p:column>
<!-- Does not work -->
<p:column style="text-align: center">
<p:commandButton id="myButton" actionListener="#{bean.method()}" />
</p:column>
<!-- Works -->
<f:facet name="footer">
<p:commandButton id="myButton2" actionListener="#{bean.method()}" />
</f:facet>
</p:dataTable>
</h:panelGrid>
</h:form>
</p:panel>
Why ?
The following workaround did not work for me:
<p:commandLink ... onclick="bui.show()" oncomplete="bui.hide()">
...
<p:blockUI widgetVar="bui" />
As a workaround, I used pe:blockUI:
http://www.primefaces.org/showcase-ext/sections/blockui/blockPage.jsf
What I mean : You don't have any value in your datatable. Put it one, you can create a backingBean return one value and add property value=#{myBean.value}. Also you have data on you datatable ! Test it
Related
I got a datatable with a custom layout selectoneradio. It doesnt submit correct values after the first row.
This is the datatable:
<h:form id="dataTableForm">
<br />
<p:dataTable id="absenceTable" var="absence" widgetVar="absenceTable"
value="#{adminController.absenceList}" rowIndexVar="rowIndex"
emptyMessage="Keine Absenzen mit ausstehender Genehmigung gefunden"
style="width:70%;margin-left:15%;margin-right:15%;margin-bottom:20px;margin-top:10px;"
rowKey="#{absence.id}" rows="30" paginator="true"
paginatorPosition="bottom" paginatorAlwaysVisible="false"
paginatorTemplate="{PageLinks}" sortBy="#{absence.startDate}"
sortOrder="descending"
filteredValue="#{adminController.filteredAbsences}">
<f:facet name="header">Mitarbeiterabsenzen mit ausstehender Genehmigung</f:facet>
<p:column>
<p:selectOneRadio id="action" value="#{absence.status}" required="false"
layout="custom" >
<f:selectItem itemValue="PENDING" noSelectionOption="true" />
<f:selectItem itemValue="APPROVED" />
<f:selectItem itemValue="REJECTED" />
<p:ajax event="valueChange" immediate="true" listener="#{adminController.checkBoxListener}" />
</p:selectOneRadio>
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="0" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="1" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="2" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Speichern"
action="#{adminController.save()}" update="absenceTable" />
</f:facet>
</p:dataTable>
</h:form>
The row index and absence loop variable is defined on the datatable.
Its all in the same form.
The problem is, somehow, it only works for the first row. The other rows submit "on" instead of the value. I found in the generated html that they are not provided with value-tag like the radiobuttons in the first row are:
I guess its gonna be a stupid syntax issue or something... This is what i get debugging clicking on anything but the first row:
Im running on PF 5.2
This is a bug in PF5.2
The code runs smoothly on PF5.3
When using autoComplete and columnToggler within a dataTable, I get a broken column-list in the column toggler.
That means, the column-list doesn't show the column-names but some javascript code instead (for each column).
Here is an example:
<p:commandButton id="showColsButton" type="button" value="Show Columns" />
<p:columnToggler datasource="myDataTable" trigger="showColsButton" />
<p:dataTable id="myDataTable" var="row" ...>
<p:column sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
</p:dataTable>
Is this a bug or is there any solution for this specific problem?
Putting an input in the header facet is not valid. If you want to use it as a filter or something, put it in a f:facet name="filter".
<p:dataTable id="myDataTable" var="row" ...>
<p:column filterBy="#{row.myCol1}" sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
</f:facet>
<f:facet name="filter">
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
But you might need to improve on the way the filter is used by not using the p:ajax but use an onchange=PF('dataTableWidget').filter(), adding a widgetVar attribute and adding filter attributes
See also
PrimeFaces showcase dataTable filter
I have a p:dataTable looks like this.
<p:remoteCommand name="rowEdit" action="#{servicesController.onRowEditCommand}" update="servicesTable" />
<p:remoteCommand name="rowEditCancel" action="#{servicesController.onRowEditCancelCommand}" update="servicesTable" />
<p:dataTable id="servicesTable"
value="#{servicesController.services}" var="service" rowKey="#{service.id}"
editable="true" editMode="row">
<p:ajax event="rowEdit" listener="#{servicesController.onRowEdit}"
oncomplete="rowEditCommand()"/>
<p:ajax event="rowEditCancel" listener="#{servicesController.onRowEditCancel}"
oncomplete="rowEditCancelCommand()"/>
<p:ajax event="rowSelect" update=":mainMenu"
listener="#{servicesController.sessionScopeServiceChanged}"/>
<!-- other columns here -->
<p:column style="width: 44px;">
<p:rowEditor/>
</p:column>
<!-- other columns here -->
</p:dataTable>
The p:rowEditor works fine for the first time. And it doesn't work from the second time. It gets to edit mode but the checkbox and x doesn't respond.
Two command names were wrong.
<p:remoteCommand name="rowEdit" ... />
<p:remoteCommand name="rowEditCancel" ... />
<p:ajax ... oncomplete="rowEditCommand()"/>
<p:ajax ... oncomplete="rowEditCancelCommand()"/>
I changed to.
<p:remoteCommand name="rowEditCommand" ... />
<p:remoteCommand name="rowEditCancelCommand" ... />
<p:ajax ... oncomplete="rowEditCommand()"/>
<p:ajax ... oncomplete="rowEditCancelCommand()"/>
I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>
How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"
Commandbutton with id("myButtonId2") works fine. I mean it updates "myOutputPanel"
but commandbutton(myButtonId) which is inside datatable doesn't update outputPanel. I found the suggestions and tried with the following,
update=":myForm:myOutputPanel"
update="#myForm"
update=":myOutputPanel"
But none of them worked...
Here is the snippet...
<h:form id="myForm" prependId="false">
<p:panel id="myPanel">
<p:dataTable id="myDatatable">
<p:column style="width:4%">
<p:commandButton id="myButtonId" actionListener="#{bean.showPanel}" update="myOutputPanel"/>
</p:column>
</p:dataTable>
<p:commandButton id="myButtonId2" update="myOutputPanel"/>
</p:panel>
<p:outputPanel id="myOutputPanel" rendered="#{bean.show}">
//some stuff
</p:outputPanel>
Try to put your <p:outputPanel /> inside a <p:panel />
and add a "widgetVar" attribute
For example : <p:panel widgetVar="var" [..]>
and just update the panel directly with update="#widgetVar(var)"