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>
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 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.
I need create an primefaces Datatable with InputText into cells and get de information edited in the inputText
I create the datatable with the next code:
<p:dataTable value="#{busquedaArticulo.attr}" var="rowName" styleClass="table table-bordered table-stripped" rowIndexVar="rowIdx">
<p:column headerText="" styleClass="ui-widget-header">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns value="#{busquedaArticulo.siz}" var="columnName" headerText="#{columnName}" columnIndexVar="colIdx">
<h:inputText id="siz" value="#" styleClass="form-control" />
</p:columns>
</p:dataTable>
I suggest you to use editable row. you can show value of each entry if it has been set by user or has a default value or leave it empty or "not set" if it's not set.
user can click on pencil icon and edit value of each row. once row has been edited you can get new value in your backing bean.
look at this: http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
hope it was useful :)
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.
I have the following code, using PrimeFaces 3.0.M3, Tomcat 7 and Mojarra 2.1.3.
<p:dataGrid columns="1" var="answer" value="#{answersbysubject}">
<p:column>
<p:panel columns="1">
<h:outputText value="#{answer.question.name}" />
<p:dataGrid columns="5" var="selection" value="#{brain.selections}">
<p:column>
<h:panelGrid columns="1" styleClass="selections" id="mySelection">
<h:outputText value="#{selection.name}" />
<p:commandLink update="mySelection">
<p:graphicImage value="/img/CheckboxFull.png" rendered="#{selection == answer.selection}" />
<p:graphicImage value="/img/CheckboxEmpty.png" rendered="#{selection != answer.selection}" />
<f:setPropertyActionListener value="#{selection}" target="#{answer.selection}" />
</p:commandLink>
</h:panelGrid>
</p:column>
</p:dataGrid>
</p:panel>
</p:column>
</p:dataGrid>
sorry if a bit too verbose...
The point is: I want to realize a nicer 5-way checkbox (working like a set of radio buttons).
The whole works fine serverside, except that when I click another checkbox it rerenders ONLY the checkbox I just clicked. That is, I see two checked checkboxes - the old one doesn't clear until I do the F5 refresh in browser.
I tried to give ids to each tag and then let the commandLink update all, but nothing else than the current checkbox gets updated :(
The ids of a table row get probably mixed up during dynamic generation, is this why no other tags can be found/identified reliably for update? If this is the situation, then what would be the solution for me to update ONLY the current table row (not only the current table cell like now...)?
Many thanks!