dropdown in primefaces datatable livescroll - drop-down-menu

I am using datatable of primefaces and using its feature of livescroll. But i am facing a strange issue. When i scroll down, data gets loaded on the screen in a perfect manner except dropdowns (using p:selectOneMMeny) for this. Is there some issue with drop down and live scroll. Please help. PFB my code.. for the same..
<p:dataTable id="searchTable" var="student" value="#{dataBean.students}"
scrollRows="10" scrollable="true" scrollHeight="200" liveScroll="true" >
<p:column styleClass="colum8" style="text-align: center; background-color:#dcdcdc; width: 150px;padding: 4px;">
<f:facet name="header">
<h:outputText value="#{msgs.mpromo_buscar_estatus}" />
</f:facet>
<p:selectOneMenu styleClass="DropDownBuscarStyle" id="promoEstatusDD" value="#{promo.estatusID}" valueChangeListener="#{buscarMB.estatusChangeListener}" disabled="#{sessionScope['UserDetails'].perfil ne 'MKT'}" onchange="setSpanValueOfDropDown(this);">
<f:selectItem itemLabel="#{msgs.mpromo_buscar_select}" itemValue="-1"></f:selectItem>
<f:selectItems value="#{buscarMB.estatusSelectList}" /> <p:ajax event="change" listener="#{buscarMB.changeStatus}" oncomplete="changeStatusComplete();" update="#this :buscarForm:isEstatusChangeDeniedId :buscarForm:divError editLinkId"> </p:ajax>
</p:selectOneMenu>
</p:column>
</p:datatable>

Related

p:datatable displayed wrongly after ajax update

I have problem with a primefaces datable, I have a filter on a column and before to filter the result my datatable is displayed properly like this:
When I choose a filter, the combobox of the filter is properly poulated:
A soon I choose the item for the filter, the results are properly filtered but I have a display of the datatable like this:
I just see the results who should be display in a datatable but the table is gone.
The code seems good and I don't see where is the problem:
<p:outputPanel autoUpdate="true" class="ui-g-12">
<div class="card">
<h1>Gestion des noeuds</h1>
<h:form>
<p:dataTable value="#{nodeController.nodes}"
var="node"
tableStyle="table-layout: auto;"
rowKey="#{node.nodeId}"
paginator="true"
paginatorPosition="bottom"
paginatorAlwaysVisible="false"
rows="15"
widgetVar="nodeTable"
filteredValue="#{nodeController.filterNodes}"
editable="true"
selection="#{nodeController.selectedNode}"
selectionMode="single"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
<p:column headerText="ID">
<h:outputText value="#{node.nodeId}"/>
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{node.modeName}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{node.nodeDescription}"/>
</p:column>
<p:column filterBy="#{node.typeNodeId}" filterMatchMode="exact" headerText="Type">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('nodeTable').filter()">
<f:selectItem itemLabel="filtre" itemValue="#{null}" noSelectionOption="true"/>
<f:selectItems value="#{nodeController.nodeTypes}"/>
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{node.typeNodeId}"/>
</p:column>
<p:column headerText="IPv4">
<h:outputText value="#{node.ipv4}"/>
</p:column>
<p:column headerText="IPv6">
<h:outputText value="#{node.ipv6}"/>
</p:column>
<p:column headerText="powwo agent">
<h:selectBooleanCheckbox value="#{node.agentInstalled}"/>
</p:column>
<p:column headerText="Network status" style="text-align:center">
<p:graphicImage rendered="#{node.isconnected}" name="images/ConnectionStatus25.png" library="omega-layout" width="20"/>
<p:graphicImage rendered="#{!node.isconnected}" name="images/Siren-25.png" library="omega-layout" width="20"/>
</p:column>
<p:column>
<p:rowEditor/>
</p:column>
</p:dataTable>
<p:commandButton value="effacer"
update="msg"
actionListener="#{nodeController.deleteSelectedNode()}"
style="width:auto;margin-bottom:10px;margin-top: 10px"/>
</h:form>
</div>
</p:outputPanel>
Did you already meet this issue with the rendered of a datable? Any idea how to fix it?
Effectively, your title and first sentence are not correct. It is not a bug in the datatable but a 'bug' in your code. You should not use autoupdate="true" on the p:outputPanel in this case. It updates all its content on each ajax update that happens inside it, including an ajax update during filtering. This latter also updates the datatable which means two conflicting updates. Off-topic: If you'd created a Minimal, Complete, and Verifiable example , you'd have found this out during removal of code.
If you have this problem when you have an ajax listener on one of the filter/page/sort/... events on the datatable and you need the autoUpdate="true" on the panel for other events in the wrapping panel, you could also prevent the autoUpdate to happen for these specific events by adding a ignoreAutoUpdate="true" to the specific events. So e.g.
<p:ajax event="filter" ignoreAutoUpdate="true" ... />

Incell Editing in datatable for primefaces not sending edited values to event

I want a table with in-line editing option in datatable. I am able to write full code but when i am clicking on edit button, the value which i am getting from event object from server side is same as old. I am not getting new values.
how to get new values from event object.
<p:dataTable id="dataTable"
var="osList"
value="#{WLMPortalViewController.allOSInfo}" rowKey="#{osList.osName}"
paginator="true" rows="5"
paginatorPosition="bottom"
editable="true" >
<p:ajax event="rowEdit" update="#this" listener="#{WLMPortalDataController.saveOSData}"/>
<p:column headerText="Options" >
<p:rowEditor />
</p:column>
<p:column headerText="Version" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{osList.osVersion}" />
</f:facet>
<f:facet name="input">
<p:inputText id="inputosVer" required="true" requiredMessage="* Version can't Empty." value="#{osList.osVersion}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
and my server side code look like this
public void saveOSData(RowEditEvent event){
System.out.print(event.getObject());
}

Primefaces ajax update

I have primefaces datatable,
<p:panel id="resultpanel">
<p:dataTable id="tbl" var="job" value="#{report.jobModel}"
paginator="true" rows="#{report.jobModel.pageSize}"
paginatorPosition="bottom" lazy="true" scrollable="true"
resizableColumns="true" rendered="#{!empty report.jobModel}"
emptyMessage="#{messages['common.datatable.emptymessage']}">
<p:ajax event="filter" listener="#{report.jobModel.onFilter}"
update="#form" />
<p:column sortBy="#{job.detail4}" filterBy="#{job.detail4}">
<f:facet name="header">
<h:outputText value="#{messages['content.donejobs.ftdi.datatable.fixedfeecolumn.header']}" />
</f:facet>
<h:outputText value="#{job.detail4}">
<f:converter converterId="KurusLiraConverter"></f:converter>
</h:outputText>
</p:column>
<f:facet name="footer">
<h:outputFormat value="#{messages['content.donejobs.ftdi.datatable.footer']}">
<f:param value="#{report.jobModel.rowCount}" />
</h:outputFormat>
<p:panel layout="block" style="border: 0px; text-align: center;">
<p:commandLink ajax="false" title="Download Report">
<p:graphicImage value="/images/excel.png" />
<p:fileDownload value="#{report.excelFileOfReportTable}" />
</p:commandLink>
</p:panel>
</f:facet>
</p:dataTable>
</p:panel>
I want to update the footer part when I filter the table. I have tried to update the footer by putting all the things in the footer in a single panel, giving it an ID, inspecting this ID via firebug, and giving it as a value to the update attribute of the primefaces ajax component. I have also performed this approach, to html outputformat and param components. But no success, lastly I have tried to update the form, this time the whole table has been rendered like a text file. Is there a way to update the table size, after filtering? By the way, I am using primefaces 3.0.RC1-SNAPSHOT, and testing in firefox 7.0.1. Thank you very much for your interest and comment.
There is an open issue for that here and they provide a patch for the dataTable code. My workaround (aka huge hack) doesn't require touching the primefaces codebase, which I prefer. I tested it for the events below, but I can't see why it wouldn't work for the rowEdit event.
<p:remoteCommand name="updateFilters" update="table:totalid"></p:remoteCommand>
<p:dataTable id="tabelaMunicipio" value="#{bean.model}" ...>
<p:ajax event="page" oncomplete="updateFilters()"/>
<p:ajax event="filter" oncomplete="updateFilters()"/>
<p:ajax event="sort" oncomplete="updateFilters()"/>
<p:column headerText="#{msg['id']}" sortBy="#{id}">
<h:outputText value="#{item.id}"></h:outputText>
<f:facet name="footer">
<h:outputText value="#{bean.model.totals['id']}" id="totalid"/>
</f:facet>
</p:column>
...
</p:dataTable>
Yes, I use a p:remoteCommand (invoked by the oncomplete client-side hook in p:ajax) to update the components inside the footer row. This causes a tiny delay on the footer update in comparison to the data itself, but I can live with that.
3.0.RC1-SNAPSHOT is not an official release, and from what I can tell it could mean any number of nightly builds after M4 or between M3 and M4. You should upgrade (or downgrade?) to a stable release such as M3 or M4 and see if you get the same problems.
Also you could try update="#this", but I'm unsure what effect that would have that shouldn't already work with #form.

Unable to populate values obtained from ajax call using PrimeFaces

Hi
I have made an ajax call using primefaces [p:ajax]. The call to the listener was successful and it returned the required values. To update these properties in xhtml, I have checked the DOM source, to find out the exact ID of the column, using which the column or property would be updated. But, in this case the fields are not getting the values.
The code I used in this case is
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="mainForm:table1:#{rowIndex}:receiptCode, mainForm:table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column id="receiptCodeCol">
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" />
</p:column>
<p:column id="receiptTypeCol">
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px"/>
</p:column>
</p:dataTable>
</div>
</p:tab>
<p:tab title="Print">
</p:tab>
</p:tabView>
</h:form>
The id from the DOM view source was table1:0:receiptCodeHotKey:receiptCode
What would be the problem for the data to not get populated in the field.
I think the source of the problem is your usage of h:form. You don't need to put it around each single input element. Put one h:form around the datatable and then check again the generated ids.
Then it should be something like (example for first row with rowindex 0):
formId:table1:0:receiptCode

Ajax call is made but the related fields are updated only after page refresh

I have tried making an ajax call for a selectOneMenu using JSF 2 and primefaces 2.2. The actionListener method is being called. But the columns I specified in the update attribute are not getting updated. When I refersh the page, I could find the updated values. Please help me out in this.
The code I used was
<h:form id="mainForm" prependId="false">
<p>
<p:tabView>
<p:tab title="Receipt">
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="table1:#{rowIndex}:receiptCode, table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Print">
</p:tab>
Try f:ajax instead of p:ajax and re-render the whole form to get closer to the problem source :
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model"
itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<f:ajax render="#form"
listener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}"/>
</h:selectOneMenu>
This should work as stated in my answer to your previous question.
Partial updates of dataTables and ajax updates of dataTables triggered from a component within the dataTable are not working in the 2.2 version of Primefaces. This is a known bug that may have been resolved in version 3.
One suggestion you can try is to use a single form for each dataTable and only update elements from within that one form.

Resources