Primefaces dataTable cannot edit after tab changed - primefaces

Originally I used an editable dataTable, and it worked fine.
Then I put the dataTable in a dymanic tabView's tabs, then in the first rendered tab workes fine, but after I change tab, I cannot edit cells.
PrimeFaces version: 6.0
<p:tabView value="#{tippingViewBean.rounds}" var="round" dynamic="true">
<p:tab title="#{round}.">
<p:dataTable id="tippingTable#{round}" rowIndexVar="rowId" editable="true" editMode="cell"
widgetVar="cellTips"
var="userTip" value="#{tippingViewBean.getUserTips(round)}"
resizableColumns="true">
<p:ajax event="cellEdit" listener="#{tippingViewBean.addTip(userTip)}"/>
<p:column headerText="Kezdés">
<h:outputText value="#{userTip.schedule.date}"/>
</p:column>
<p:column headerText="Hazai Csapat">
<h:outputText value="#{userTip.schedule.homeTeam.name}"/>
</p:column>
<p:column headerText="Vendég Cspat">
<h:outputText value="#{userTip.schedule.awayTeam.name}"/>
</p:column>
<p:column headerText="Győztes">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{userTip.winnerTip}"/></f:facet>
<f:facet name="input">
<p:selectOneMenu id="winnerTipInput#{round}"
disabled="#{tippingViewBean.tipIsClosed(userTip)}"
value="#{tippingViewBean.winnerTip}" style="width: 100%">
<f:selectItems value="#{tippingViewBean.winnerTipForSelection}" var="selectItem"
itemLabel="#{selectItem}" itemValue="#{selectItem}"/>
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="2,5 Gól alatt/felett">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{userTip.twoAndHalfTip}"/></f:facet>
<f:facet name="input">
<p:selectOneMenu id="goalsTipInput#{round}"
disabled="#{tippingViewBean.tipIsClosed(userTip)}"
value="#{tippingViewBean.goalsTip}" style="width: 100%">
<f:selectItems value="#{tippingViewBean.goalsTipForSelection}" var="goalsSelectItem"
itemLabel="#{goalsSelectItem}" itemValue="#{goalsSelectItem}"/>
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
What I'm doing wrong?

Ok, I found the answer.
I changed the dataTable's widgetVar to unique ( cellTips#{round} ), and it works.

Related

header not aligning with columns when scrollable enabled JSF Primefaces 6.0

I am developing web using PrimeFaces 6.0 components. On
<p:dataTable> component when we set scrollable="true" option, columns headers alignment goes wrong.
Following is my code snippet:
<p:fieldset legend="Machine Test Match" id="panel233" toggleable="true" toggleSpeed="500" >
<!--<p:panel id="panel233" header=" Machine Test Match" style="height:325px;border: none">-->
<p:dataTable id="testmatchtable" var="testMatchvalues" value="#{manufactureBean.listTestMatchata}" filteredValue="#{manufactureBean.filteredManufacture}" editable="true"
styleClass="mystyle" tableStyle="table-layout:auto;width:100% important!;" rowKey="#{testMatchvalues.testId}" scrollRows="10" scrollable="true" scrollHeight="230" rows="40" liveScroll="true" selection="#{manufactureBean.testMatchModel}" selectionMode="single" resizableColumns="true" >
<p:column headerText="Test ID" filterBy="#{testMatchvalues.testId}" filterMatchMode="contains" style="width:35px">
<h:outputText value="#{testMatchvalues.testId}" />
</p:column>
<p:column headerText="Test Desc" filterBy="#{testMatchvalues.testDesc}" filterMatchMode="contains" style="width:35px" >
<h:outputText value="#{testMatchvalues.testDesc}" />
</p:column>
<p:column headerText="Specimen Desc" filterBy="#{testMatchvalues.specimenDesc}" filterMatchMode="contains" style="width:35px" >
<h:outputText value="#{testMatchvalues.specimenDesc}" />
</p:column>
<p:column headerText="Path Test Desc" filterBy="#{testMatchvalues.pathTestDesc}" filterMatchMode="contains" style="width:35px">
<h:outputText value="#{testMatchvalues.pathTestDesc}" />
</p:column>
<p:column headerText="Path Param Name" style="width:35px" filterBy="#{testMatchvalues.parameterName}" filterMatchMode="contains">
<h:outputText value="#{testMatchvalues.parameterName}" />
</p:column>
<p:column headerText="Additional Factor" style="width:35px" >
<h:outputText value="#{testMatchvalues.additionFactor}" />
</p:column>
<p:column headerText="Multiply Factor" style="width:35px">
<h:outputText value="#{testMatchvalues.multiplyFactor}" />
</p:column>
<p:column headerText="Machine Host Code" style="width:35px">
<h:outputText value="#{testMatchvalues.machineHostCode}" />
</p:column>
<p:column headerText="Active" style="width:35px">
<h:outputText value="#{testMatchvalues.active}" />
</p:column>
</p:dataTable>
<!--</p:panel>-->
</p:fieldset>
Code taken from https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
Attached image shows the problem clearly as column headers and data is not aligned properly.
Image link
For p:column, width="4%" works for me rather than using '4px'

How to make an editable cell clickable in order to open a pop-up

I have an editable table:
<p:dataTable id="myTable" ... editable="true"></p:dataTable>
There is only one line in the table and I want a cell of this line to be clickable in order to open a pop-up.
I tried the solution given there
<p:column id="myColumn" headerText="name" styleClass="align-center">
<p:cellEditor>
<f:facet name="output">
<h:panelGrid update="#widgetVar(infosNameFormDialog)" onClick="PF('infosNameFormDialog').show();">
<h:outputText value="#{element.name}" />
</h:panelGrid>
</f:facet>
<f:facet name="input">
<p:inputText value="#{element.name}" />
</f:facet>
</p:cellEditor>
</p:column>
This solution has a problem: because of the h:panelGrid I have a rectangle that frames the data of the cell, which is not acceptable.
So I tried with a p:link as other solution
<p:column id="myColumn" headerText="name" styleClass="align-center">
<p:cellEditor>
<f:facet name="output">
<p:link update="#widgetVar(infosNameFormDialog)" onClick="event.preventDefault(); PF('infosNameFormDialog').show(); event.stopImmediatePropagation();">
<h:outputText value="#{element.name}" />
</p:link>
</f:facet>
<f:facet name="input">
<p:inputText value="#{element.name}" />
</f:facet>
</p:cellEditor>
</p:column>
Now I can edit the cell with any value I want and I get a link which allows to open a pop-up.
But when there is no data in the cell, there can't be any link...
And I don't have any ideas to solve this problem
I use Primefaces 5.1

export text then datalist in excel and pdf with dataexporter

I am using primefaces 3.4.2 jar. I have a datatable with four columns. In two columns I have a datalist and I want to export text showed by datalist. But when I export it, it shows the following "org.primefaces.component.datalist.DataList#1195cc3" in the pdf and xls file.
<p:dataTable emptyMessage="#{messages['empty.result.set']}" id="searchResult" var="row" value="#{managePessoaJuridica.manageableList}" rows="10" paginator="true" paginatorPosition="top" paginatorAlwaysVisible="false" style="display:#{managePessoaJuridica.manageableList == null? 'none': ''}">
<p:column styleClass="column_icons" exportable="false">
<p:panelGrid columns="#{pessoaJuridicaController.showSelectAction?3:2}">
<p:commandButton id="selectAction" icon="ui-icon-circle-check" title="#{messages['action.select']}" action="#{pessoaJuridicaController.select(row.id)}" immediate="true" process="#this" rendered="#{pessoaJuridicaController.showSelectAction}"/>
<p:commandButton id="editAction" icon="ui-icon-pencil" title="#{messages['action.edit']}" action="#{pessoaJuridicaController.load(row.id)}" immediate="true" process="#this" update="#form"/>
<p:commandButton id="deleteAction" icon="ui-icon-trash" title="#{messages['action.delete']}" action="#{pessoaJuridicaController.delete(row.id)}" immediate="true" process="#this" update="searchResult"
onclick="return confirm('#{messages['confirm.delete.this']} #{messages['pessoa.juridica.view.title']}');" />
</p:panelGrid>
</p:column>
<p:column id="column_nome" sortBy="#{row.nome}" >
<f:facet name="header">
<h:outputText id="columnHeader_nome" value="#{messages['pessoa.nome']}"/>
</f:facet>
<h:outputText id="nome" value="#{row.nome}">
</h:outputText>
</p:column>
<p:column style="width:0px;">
<f:facet name="header">
<h:outputText id="columnHeader_categoriasPessoa" value="#{messages['pessoa.categorias.pessoa']}"/>
</f:facet>
<p:dataList type="definition" id="categoriasPessoa" var="item" value="#{row.categoriasPessoa}" >
<p:column>
<h:outputText id="item_categoriasPessoa" value="#{item}" converter="com.domain.configuracao.crud.CategoriaPessoaJsfConverter"/>
</p:column>
</p:dataList>
</p:column>
<p:column style="width:0px;">
<f:facet name="header">
<h:outputText id="columnHeader_identificacoesPessoa" value="#{messages['pessoa.identificacoes.pessoa']}"/>
</f:facet>
<p:dataList type="definition" id="identificacoesPessoa" var="item" value="#{row.identificacoesPessoa}">
<p:column>
<h:outputText id="item_categoriaIdentificacoes" value="#{pessoaJuridicaController.getCategoriaIdentificacao(item)}" converter="com.domain.configuracao.crud.CategoriaIdentificacaoJsfConverter"/>:
<h:outputText id="item_identificacoesPessoa" value="#{item}" converter="com.domain.configuracao.crud.IdentificacaoPessoaJsfConverter"/>
</p:column>
</p:dataList>
</p:column>
<p:column id="column_ativo" sortBy="#{row.ativo}" >
<f:facet name="header">
<h:outputText id="columnHeader_ativo" value="#{messages['classe.base.cadastro.ativo']}" />
</f:facet>
<h:outputText id="ativo" value="#{row.ativo}" converter="com.BooleanJsfConverter" >
</h:outputText>
</p:column>
<f:facet name="footer">
<p:menuButton value="#{messages['export.action']}" rendered="#{not empty managePessoaJuridica.manageableList}">
<p:menuitem value="#{messages['export.spreadsheet']}" ajax="false">
<p:dataExporter type="xls" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
<p:menuitem value="#{messages['export.pdf']}" ajax="false">
<pe:exporter type="pdf" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
<p:menuitem value="#{messages['export.csv']}" ajax="false">
<p:dataExporter type="csv" target="searchResult" fileName="export" excludeColumns="0" encoding="ISO-8859-1"/>
</p:menuitem>
</p:menuButton>
<p:spacer width="10"/>
<h:outputText value="#{fn:length(managePessoaJuridica.manageableList)} #{messages['records.found']}" rendered="#{not empty managePessoaJuridica.manageableList}"/>
</f:facet>
</p:dataTable>
But when I export it, it shows the following
"org.primefaces.component.datalist.DataList#1195cc3" in the pdf and
xls file.
Obviously, Primefaces's data exporter use the toString() method of an object to print its "value(s)".
Suggestions :
Write a custom exporter (recommended)
Override toString() method of org.primefaces.component.datalist.DataList (not advised)

call a method after the execution of the filtering of primefaces datatable

I have this datatable:
<p:dataTable id="tabla_gral" rendered="#{consumoMaterial.verTabla}" var="item" paginator="true" rows="15" rowKey="#{item.no}" value="#{consumoMaterial.listadoConsumo}" filteredValue="#{consumoMaterial.listadoConsumoFiltered}">
<p:ajax event="filter" listener="#{consumoMaterial.actualizarSaldos}" update=":form2:tabla_gral"/>
<f:facet name="header">
<h:outputText value="Búsqueda de Consumo por: #{consumoMaterial.tipoBuscar}: '#{consumoMaterial.codigo}'"/>
</f:facet>
<p:column exportable="#{consumoMaterial.no}" rendered="#{consumoMaterial.no}" id="cclave" sortBy="#{item.no}" filterBy="#{item.no}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Nro"/>
</f:facet>
<h:outputText value="#{item.no}"/>
</p:column>
<p:column exportable="#{consumoMaterial.centroCosto}" rendered="#{consumoMaterial.centroCosto}" id="cconcepto" sortBy="#{item.centroCosto}" filterBy="#{item.centroCosto}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Centro de Costo"/>
</f:facet>
<h:outputText value="#{item.centroCosto}"/>
</p:column>
<p:column exportable="#{consumoMaterial.codigoAlmacen}" rendered="#{consumoMaterial.codigoAlmacen}" id="ctipo" sortBy="#{item.codigoAlmacen}" filterBy="#{item.codigoAlmacen}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Almacén"/>
</f:facet>
<h:outputText value="#{item.codigoAlmacen}"/>
</p:column> </p:dataTable>
I want to call a method after the execution of the filtering of primefaces datatable,
I tested with
<p:ajax event="filter" listener="#{consumoMaterial.actualizarSaldos}" update=":form2:tabla_gral"/>
but when call actualizarSaldos listadoConsumoFiltered is null.

How do I load rows into dataTable 2 when a row in dataTable 1 is clicked?

I have a form with a panel and two dataTables. The code below has had most of the columns removed to make it easier to follow.
<h:form id="invoiceLookUp">
<p:panel>
<f:facet name="header">
<p:column style="font-weight: bold;">
Invoice Selection Criteria
</p:column>
</f:facet>
<h:outputText value="Seq ID"/>
<p:inputText
id="invoice_header_seq_id" styleClass="field" size="10"
value="#{invoiceBean.invoice_header_seq_id}"
/>
<p:commandButton
update="invoicesTable" value="Look Up"
action="#{invoiceBean.addInvoices()}"
/>
</p:panel>
<p:dataTable
id="invoicesTable" var="invoice" rows="15" lazy="true" selectionMode="single"
value="#{invoiceBean.invoiceList}"
rowKey="#{invoice.invoiceHeader.invoiceHeaderSeqId}"
selection="#{invoiceBean.selectedInvoice}"
>
<p:ajax event="rowSelect" update=":invoiceLookUp:invoiceLinesTable"/>
<f:facet name="header"><h:outputText value="Invoice Headers" /></f:facet>
<p:column sortBy="#{invoice.invoiceHeader.invoiceHeaderSeqId}" id="invoiceSeqId">
<f:facet name="header">
<h:outputText value="Seq ID" title="Invoice Header Seq ID"/>
</f:facet>
<h:outputText value="#{invoice.invoiceHeader.invoiceHeaderSeqId}" />
</p:column>
</p:dataTable>
<p:dataTable
id="invoiceLinesTable" var="invoiceLine" rows="15" lazy="true" selectionMode="single"
value="#{invoiceBean.selectedInvoice.invoiceLines}"
rowKey="#{invoiceLine.invoiceLineSeqId}"
selection="#{invoiceBean.selectedInvoiceLine}"
>
<f:facet name="header"><h:outputText value="Invoice Lines" /></f:facet>
<p:column sortBy="#{invoiceLine.invoiceLineSeqId}" id="invoiceLineSeqId">
<f:facet name="header"><h:outputText value="Line Seq ID"/></f:facet>
<h:outputText value="#{invoiceLine.invoiceLineSeqId}"/>
</p:column>
</p:dataTable>
</h:form>
When you enter a Seq ID and then click Look Up, the table populates as expected. When I select a row in the invoicesTable, I get the following error:
javax.faces.FacesException: Cannot find component with identifier ":invoiceLookUp:invoiceLinesTable" referenced from "form:invoiceLookUp:invoicesTable".
Can anyone tell me what I am doing wrong?