I want to use PrimeFaces <p:dataTable>. I have written this code:
<p:dataTable var="v" value="#{bean.dataValues}">
<p:column headerText="First Column">
<h:outputText value="" />
</p:column>
<p:column headerText="Second Column">
<h:outputText value="value of second column" />
</p:column>
<p:column headerText="Third Column">
<h:outputText value="value of third column" />
</p:column>
</p:dataTable>
Now I want to get this kind of result in my XHTML page:
1. | value of second column | value of third column
2. | value of second column | value of third column
3. | value of second column | value of third column
4. | value of second column | value of third column
The first column is very important for me. This column must be auto-incremented and doesn't involve any value of bean.dataValues. If the List bean.dataValues includes 4 elements, the first column of the datatable must be auto-incremented from 1 to 4 for each value in datatable. How can help?
Thanks !
Marwief
Use the rowIndexVar property of <p:dataTable> like the following.
<p:dataTable var="v" value="#{bean.dataValues}" rowIndexVar="rowIndex">
<p:column headerText="First Column">
<h:outputText value="#{rowIndex+1}"/>
</p:column>
...
</p:dataTable>
Related
I just want to add p:commandButton for each item in list in p:dataGrid.
But, when I set columns = 4 and rows = 1 from properties p:dataGrid. I can't get value from commandButton anymore in rest of list (except for the first item in list).
Tried change into h:commandButton, p:commandLink, ajax= false;
<p:dataGrid var="list" value="#{myBean.listCompany}" columns="4" layout="grid"rows="1" paginator="true" paginatorPosition="bottom" paginatorTemplate="{PreviousPageLink} {NextPageLink} ">
<div class="card" style="height: 350px">
<p:column>
<p:panel>
<h:panelGrid columns="1">
<p:commandButton value="Choose" action="#{myBean.selectCompany(list.companyName)}">
</p:commandButton>
</h:panelGrid>
</p:panel>
</p:column>
</div>
</p:dataGrid>
Based on this , https://knowles.co.za/primefaces-actions-not-firing-in-last-rows-of-datagrid/
The quick fix is just to set the number of rows correctly, to fill the number of columns you have. As long as the number of rows is a multiple of the number of columns (eg, 2 columns, 6 rows) you should be fine.
But, this is not the solution that I want, I need to display p:dataGrid with 4 columns and 1 row.
If I get your intention right that you want to display 4 elements out of #{myBean.listCompany} in one row, you should set colums="4" and rows="4".
This way rows is a multiple of the number of columns with the multiplicator being 1.
Rows here seemes to be the total number of elements from #{myBean.listCompany} to display per page. If this does not match with a multiple of columns, there seemes to be some kind of mismatch between rendering and component input handling.
You can add a rowIndexVar="rowIndex" and output that with each element to make visible what one row is in a dataGrid.
<p:dataGrid var="list" value="#{myBean.listCompany}" columns="4"
layout="grid" rows="4" paginator="true" paginatorPosition="bottom"
paginatorTemplate="{PreviousPageLink} {NextPageLink} " rowIndexVar="rowIndex">
<div class="card" style="height: 350px">
<p:column>
<p:panel>
<h:panelGrid columns="1">
<p:commandButton value="Choose Row #{rowIndex}"
action="#{myBean.selectCompany(list.companyName)}">
</p:commandButton>
</h:panelGrid>
</p:panel>
</p:column>
</div>
</p:dataGrid>
I have a dataTable with dynamic columns:
<p:columns value="#{dashboardEditionBean.columns}" var="column" columnIndexVar="colIndex" sortBy="#{deviceMock[column.property]}" filterBy="#{deviceMock[column.property]}">
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{deviceMock[column.property]}" />
</p:columns>
I wonder if there is a way to set ID of each column? I need this so I can retrieve the column ID at the backing bean. I know that PrimeFaces generate some ID's for these columns and add the column index to them, but since I want to be able to reorder these columns and store the changes I need some more descriptive information at the backing bean (custom ID or something else).
I have a datatable with cell editing enabled. The table has a rowStyleClass that assigns background color based on a row status (INSERTED, UPDATED, DELETED or NONE). So when I edit a row, it gets an UPDATED status, when delete button is clicked, row gets a DELETE status,... Based on that status, row background should be properly coloured (green for UPDATED, red for DELETED, yellow for INSERTED).
My code:
<p:dataTable id="tblElement" var="eltItem" value="#{bean.elementList}" binding="#{bean.dtElements}" emptyMessage="No data to be displayed."
editable="true" editMode="cell" rowIndexVar="rowIndexElt" rowKey="#{eltItem.id}" resizableColumns="true" styleClass="eltStyle"
rowStyleClass="#{bean.elementRowStyle}">
<p:ajax event="cellEdit" listener="#{bean.doMarkRowAsUpdated}" update=":form1:tabView:tblElement" />
<p:column>
<p:commandButton id="btnMarkAsDeleted" icon="ui-icon ui-icon-trash" update="tblElement" action="#{bean.doBtnMarkAsDeleted}">
<p:confirm header="Confirm" message="Do you really want to delete an element?" icon="ui-icon-alert" />
</p:commandButton>
</p:column>
<p:column headerText="Key">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{eltItem.key}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{eltItem.key}" />
</f:facet>
</p:cellEditor>
</p:column>
<!-- some more columns -->
<p:dataTable>
When a cell is edited, doMarkRowAsUpdated method should be executed... and it is. Row status is set to UPDATED, so edited row background should be colored to green, but it is NOT. Note that rowStyleClass value is as it should be because the whole coloring thing works when table edit mode is set to 'row'. One more thing to mention... Let's say that I edit some row. As already mentioned, background color doesn't change. But if my next action is marking some other row as deleted, that row IS colored in red. And that's not all - previously edited row is ALSO colored in green! It's like after 'button click' method is executed, row style is updated, but after 'cellEdit' event method is executed, row style is not updated.
Any suggestion how to make row coloring work?
I'm using PF 5.1.
It should work when you embed the table in a form and update the form with a remoteCommand like this:
<p:remoteCommand name="onCellEdit" update="#form" />
<p:dataTable ... rowStyleClass="#{bean.elementRowStyle}">
<p:ajax
event="cellEdit"
listener="#{bean.doMarkRowAsUpdated}"
oncomplete="onCellEdit()"/>
I want to generate a list of tables. 1 table for each month. With 1 column for each day of the month. Here is the JSF piece I am using.
<ui:repeat value="#{worklogService.months}" var="monthnum">
<p:dataTable value="#{worklogService.getTableForMonth(monthnum)}" var="tabrow">
<p:column headerText="Name">
<h:outputLabel value="#{tabrow.get(0)}"></h:outputLabel>
</p:column>
<ui:repeat value="#{worklogService.getDaysOfMonth(monthnum)}" var="daynum">
<p:column headerText="#{daynum}">
<h:outputText value="#{tabrow.get(daynum)}"></h:outputText>
</p:column>
</ui:repeat>
</p:dataTable>
</ui:repeat>
#{worklogService.months} returns List<Integer>. One number per Month.
#{worklogService.getTableForMonth(monthnum)} returns List<List<String>>.
The first column for each table is the same. I want to generate all other columns depending on the month. The result is 12 Tables with only 1 column (the first). What could be the problem here? And how to solve it?
This construct fails because UIData components like <p:dataTable> only support UIColumn children which can in case of <p:dataTable> only be either <p:column> or <p:columns>.
In your particular case, you've 2 options:
Use <p:columns> instead of <ui:repeat><p:column>:
<p:columns value="#{worklogService.getDaysOfMonth(monthnum)}" var="daynum" headerText="#{daynum}">
#{tabrow.get(daynum)}
</p:columns>
Use <c:forEach> instead of <ui:repeat> (explained here):
<c:forEach items="#{worklogService.getDaysOfMonth(monthnum)}" var="daynum">
<p:column headerText="#{daynum}">
<h:outputText value="#{tabrow.get(daynum)}"></h:outputText>
</p:column>
</c:forEach>
I have a primefaces table with a multiple checkbox column and the way it works currently is that any click on any part of a row selects the row
How can I change it so that the row is selected only by clicking within the checkbox?
I wan this change because it will allow data in other columns to be copied after highlighting.
The issue right now is that whenever I try to highlight data in a cell, the row I clicked in gets selected and I am unable to highlight the data(and therefore unable to copy the data).
Below is my primefaces table:
<p:dataTable id="abc" value="#{myBean.getRows()}" var="row" rendered="#{!myBean.getRows().isEmpty()}" lazy="false" paginator="true" paginatorAlwaysVisible="false" rows="20" selection="#{myBean.selectedRows}" rowKey="#{uiRow.id}">
<p:column selectionMode="multiple" style="float:center"/> <!--checkbox column-->
<p:column id="data_id" headerText="#{bundle.id}" sortBy="#{uiRow.id}" filterBy="#{uiRow.id}" filterMatchMode="contains" filterStyle="width: 60px">
<h:outputText value="#{uiRow.id} "/>
</p:column>
<p:column id="data_state" headerText="#{bundle.data_state}" sortBy="#{uiRow.stateRow}" filterBy="#{uiRow.stateRow}" filterMatchMode="contains" filterStyle="width: 60px">
<h:outputText value="#{uiRow.stateRow} "/>
</p:column>
<p:column>
....
You could make your own selection checkbox and add it as a column to the datatable.
<p:column id="select">
<p:selectBooleanCheckbox value="#{row.checked}"/>
</p:column>
And then you could iterate over all the checked objects in your backing bean and do whatever you want with them...
Set disabledTextSelection to false