I am using Primefaces 5.1 in my page I use dataTable inside another dataTable.In add button press add new bean for salList and check salList not null to rendered header column.But sal column not rendered.
<p:dataTable id="mainTable" value="#{employee.employeeList}" var="emp" ..>
<p:columnGroup type="header">
<p:row >
<p:column headerText="Name"/>
</p:column headerText="value" **rendered="#{emp.salList ne null and not empty emp.salList}**/>
....
<p:column>
<f:facet name="header"><p:commandButton value="add button" action="#{employee.addButton}" update="mainTable"/>
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
<p:column>
<p:dataTable value="#{emp.salList}" var="sp">
<p:column></p:column>
..
</p:dataTable>
</p:column>
</p:dataTable>
My doubt is when I press add button to add new list salList bean and it add new bean and show component in inside dataTable.But in header column salary column is not rendered i.e header column not updated it will not rendered the specify header column.
Related
I'm creating a datatable with some some dynamically generated columns. In each of the cells of those columns, there's a button to refresh the data of that specific cell.
What I want is that the cell is blocked when the button on that cell is pressed.
Sample code:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="?????" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:columns>
</p:dataTable>
I don't know what should go in the block parameter to only block a cell. I also tried to just block="column", but even that wasn't blocking the column as I expected, instead it was just displaying the loading gif near the button but not blocking anything.
I have seen this question How update just specific cell in primefaces dataTable where the answers say it's not possible to specify a single cell, but it's from 2012, and the answers mention that it might get fixed on a later version.
After playing a bit, I found a solution.
You can define a <p:outputpanel id="cell"></p:outputpanel> surrounding the content of the cell, and then block it with block="cell" in the blockUI component.
The result would be something like:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<p:outputpanel id="cell">
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="cell" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:outputpanel>
</p:columns>
</p:dataTable>
I have primefaces datatable and i want to update specific column or entire row on cell edit. Value in edited cell determines value in other column in the same row.
I tried to update component from onCellEdit method but no success:
String targetTypeColumn = ((DataTable)event.getSource()).getClientId(FacesContext.getCurrentInstance()) +
":" + event.getRowIndex() + ":editor";
RequestContext.getCurrentInstance().update(targetTypeColumn);
Column have cell editor:
<p:column id="tgtType" styleClass="mapDetsTblColTypeTgt" headerText="Target Type">
<p:cellEditor id="editor" rendered="...">
<f:facet name="output">
<h:outputText value="..." />
</f:facet>
<f:facet name="input">
<p:inputText value="..." styleClass="mapDetsTblInput" onselect="this.value=this.value" />
</f:facet>
</p:cellEditor>
<h:outputText value="..." rendered="!..."/>
</p:column>
Any ideas?
I don't want to update whole datatable because this is waste of time.
Edit:
I tried to update datatable during on cell edit
<p:dataTable id="mapperDetailsTable" styleClass="mapperDetailsTable" widgetVar="mapperDetailsTable"
..... >
<p:ajax event="cellEdit" listener="#{bean.onCellEdit}" update=":mapperDetailsForm:growlMapper mapperDetailsTable"
oncomplete="handleCellEdit(args);" />
......
but no effect. Next cell not updated. Is it correct what i wrote? I'm using autoComplete in edited cell so i don't have update attribute.
<p:cellEditor rendered="#{guiUtils.isEditable(mapperCtrl, fieldMapping)}">
<f:facet name="output">
<h:outputText value="#{fieldMapping.fieldNameTgt}"/>
</f:facet>
<f:facet name="input">
<p:autoComplete value="#{fieldMapping.fieldNameTgt}" completeMethod="#{mapperCtrl.dmUtils.completeTargetFields}" >
<p:ajax event="itemSelect" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/>
<p:ajax event="change" listener="#{mapperCtrl.action}" process="mapperDetailsTable"/>
</p:autoComplete>
</f:facet>
</p:cellEditor>
Edit2:
I checked and value is updated on the correct element in the list.
When i used solution from this thread(reload datatable): Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">
everything is ok. So value is updated correctly but how to refresh row or cell only?
Edid 3:
I found out that i can update cell using commandButton
<p:column>
.....
<p:commandButton value="updateTgtRow" id="updateTgtRow" process="#this" ajax="true" immediate="true" update="outputType inputType"/>
</p:column>
After click in button cell is updated without reload table. But how to call click on that button after cell edit? When i added oncomplete, cell edit don't work. Cells are read only. Any idea?
<p:ajax event="cellEdit" listener="#{mapperCtrl.onCellEdit}"
process="#this" oncomplete="#(updateTgtRow).click()"/>
I solve my problem using p:commandButton component
In cell i added
<p:commandButton style="display: none" value="updateTgtRow" id="updateTgtRow" process="#this" ajax="true" immediate="true" update="outputTgtType inputTgtType"/>
It updates fields from other cells (outputTgtType and inputTgtType). In bean i call click on that button
String componentId = ((DataTable) event.getSource()).getClientId(FacesContext.getCurrentInstance()) + ":"
+ event.getRowIndex() + ":updateTgtRow";
RequestContext.getCurrentInstance().execute("document.getElementById('" + componentId + "').click()");
It looks like hack but it works. This solution update specific cells in currently edited row.
I need to display the dynamic list a value as header text in data table but the value is getting repeated for each row. I need the header to be displayed only once at top and input text also only once should come in row-wise where each row has row edit and save option.This is my code.
<p:dataTable id="examMarksVie"
var="internal"
editable="true"
rowIndexVar="rowindex"
rowKey="#{internal.internalMarkId}"
style="width:90%;margin-left:70px;margin-top:5%"
value {exam.internalMarkList}">
<p:ajax event="rowEdit" listener="#{exam.doSaveInternalMark}" update="examMarksVie"/>
<p:column headerText="#{message['label.studentManagement.transferCertificate.studentName']}">
<h:outputText value="#{internal.studentDetails.studentApplicationID.firstName} #{internal.studentDetails.studentApplicationID.middleName} #{internal.studentDetails.studentApplicationID.lastName}" />
</p:column>
<p:column
headerText="#{message['label.exam.internal.weightage']}"
style="width:265px">
<p:dataTable var="al" value="#{internal.interALlocMarkList}">
<p:columns value="#{internal.interALlocMarkList}" var="id"
columnIndexVar="index"
headerText="#{internal.interALlocMarkList[index].internalAllocId.titleName} out of #{internal.interALlocMarkList[index].internalAllocId.titleName}">
<p:inputText value="#{al.allocMark}" />
</p:columns>
</p:dataTable>
</p:column>
I have a search screen that displays data grouped together based on the search value. This is how the display is accomplished. I have a p:accordionpanel that gets dynamically populated from the back end bean. I have a p:datatable with in the p:accordianpanel. There can be more than one accordion panel that gets displayed each containing a datatable. The display works as expected.
Problem: I have implemented filter and multiple selection of rows on the datatables. If there are more than 1 datatable that gets populated, the filter and search only works on the last datatable. The selection and filteredValue attributes of the p:datatable are bound to separate objects. If I click on any of the "Select All" boxes, the rows from the last table gets selected. I would expect the rows on the table that's associated with the "Select All" check box to be selected.
Here's the accordion / datatable:
<p:accordionPanel multiple="true"
value="#{basicSearchResultsVO.sortedMessages}" var="sortedMessages">
<p:tab title="#{sortedEdiMessages.key}">
<p:dataTable id="dataTable"
emptyMessage="No Data found with searched criteria"
filteredValue="#{sortedMessages.value.filteredMessages}"
rowKey="#{message.archiveSequenceI}"
rows="10"
selection="#{sortedMessages.value.selectedMessages}"
sortBy="#{message.msgDateTimeTs}" sortOrder="descending"
value="#{sortedMessages.value.messages}" var="message"
widgetVar="messagesTable">
<f:facet name="header">
<p:outputPanel style="text-align: right;margin:3px;">
<h:outputText value="Search all fields:"/>
<p:inputText id="globalFilter" onkeyup="PF('messagesTable').filter()" style="width:150px;" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
...
</p:dataTable>
</p:tab>
...
</p:accordionPanel>
I am not sure what I am missing. Would appreciate your assistance and feed back.
OK. I found the issue with the code. Had to make the widgetVar attribute on the datatable unique for the filter / multi select to work correctly on each datatable. Here's the modified code. The only change is to the widgetVar attribute of the p:datatable and the onkeyup attribute of p:inputText bound to a unique value provided by the backend bean.
<p:accordionPanel multiple="true"
value="#{basicSearchResultsVO.sortedMessages}" var="sortedMessages">
<p:tab title="#{sortedEdiMessages.key}">
<p:dataTable id="dataTable"
emptyMessage="No Data found with searched criteria"
filteredValue="#{sortedMessages.value.filteredMessages}"
rowKey="#{message.archiveSequenceI}"
rows="10"
selection="#{sortedMessages.value.selectedMessages}"
sortBy="#{message.msgDateTimeTs}" sortOrder="descending"
value="#{sortedMessages.value.messages}" var="message"
widgetVar="#{sortedEdiMessages.key}">
<f:facet name="header">
<p:outputPanel style="text-align: right;margin:3px;">
<h:outputText value="Search all fields:"/>
<p:inputText id="globalFilter" onkeyup="PF('#{sortedEdiMessages.key}').filter()" style="width:150px;" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
...
</p:dataTable>
</p:tab>
...
</p:accordionPanel>
I need to add a row to my datatable on click of a button - "Add Employee".
The datatable shows the records corresponding to a fixed list of Employees in the bean.
What I am doing is, on click of the "Add Employee" button , I am adding an empty record of Employee to the empList.
Is there any better way to do this?
Thanks.
Either you open a dialog or a popup when clicking the add button. Then fill in the required fields (attached to a employee object. And when saving/submit you add that object to your list of employee objects. And rerender the datatable.
Or you can initially add an empty emploee object to your list. Showing it in the datatable with inputfields. On add, you add the new employee to the list and rerender the list.
list_Recs is list of records and shown in the data table.
<p:dataTable id="myTable" value="#{myBean.list_Recs}" selectionMode="single" var="myTableVar" selection="#{myBean.currentRec}">
<p:ajax event="rowSelect" listener="#{myBean.handleRowSelect}" update=":myForm:myPanel"/>
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 1" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field1}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 2" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field2}" />
</p:column>
<f:facet name="footer">
<p:commandButton value="New" action="#{myBean.prepareForInsert}" update=":myForm:myPanel"/>
</f:facet>
</p:dataTable>
<h:panelGrid id="myPanel" columns="2" >
<h:outputLabel value="Field 1"/>
<p:inputText id="fld1" value="#{myBean.newRec.field1}" />
<h:outputLabel value="Field 2"/>
<p:inputText id="fld2" value="#{myBean.newRec.field2}" />
<p:commandButton action="#{myBean.createAction}" value="Submit" update="myGrowl myTable" />
</h:panelGrid>
When New button is clicked, create an emty instance of newRec in prepareForInsert routine of myBean. So that myPanel is filled with blanks in the fields. On Submit, add the newRec to
list_Recs and the new record is diplayed in the data table because of the update on myTable.
Hope this helps.
A different option would be to show an empty employee in the footer facet of your datatable and add it to your list if the user clicks the add button. With this you can ensure that only correctly filled employee objects/entities are added to your list.