I have List<Product> products in my backEnd Bean which contains about 70 items.
I need to show it as 3 X 4 table with option to navigate between pages "next", "Previous" and option to click on page number.
How can it be done? I have no problem to use Datagrid, but how to combine it with paging?
Update:
I did the following:
<h:form>
<rich:dataGrid value="#{productBean.products}" var="product" columns="4" id="productsList">
<h:outputText value="#{product.sku}"/>
<f:facet name="footer">
</f:facet>
</rich:dataGrid>
<rich:dataScroller for="productsList" maxPages="10"/>
</h:form>
but my problem is that now I have a table with 4 columns and 18 rows.
how Can change it to 3 rows per page?
Put the <rich:dataScroller> in any of the <f:facet> of the <rich:dataGrid> .
For example:
<rich:dataGrid>
........................
........................
<f:facet name="footer">
<rich:dataScroller/>
</f:facet>
</rich:dataGrid>
Then , the paging control is at the bottom of the data grid.
Note that the real tag looks like this:
<rich:dataScroller />
(Big S, if someone copy paste the previous example will get error!)
Related
I am very new to jsf .I have created an arraylist in java class which contains 4 columns and 20 rows.There is a column which have further data linked to it when we click on that specific entry.I want to enable command link for those entries only and the rest of the data should be just displayed as it is as(command link should be disabled).I have tried them in different ways but I was getting both the output label and the command link at the same time(it means I am getting the data twice).But I need to show the data only once.Some one please suggest me a way to solve this.Below is my code where sampleMB is my managed bean and there is a column1 which has 20 rows where 4 rows have to be enabled with a command link on a condition that the data in those rows contains string "XYZ" and the rest 16 rows should be displayed as it is.
Any help will be really appreciated.
<p:dataTable id="table" value="#{sampleMB.List1}" var="cList" scrollable="true" scrollHeight="400">
<p:column headerText="column1" >
<h:outputLabel value="#{cList.column1 }" >
<p:commandLink value="#{cList.column1}" ajax="false" style="text-decoration:underline" rendered="#{cList.card_slot.contains('XYZ')}" /> </h:outputLabel>
</p:column>
</p:dataTable>
What about something like this:
<p:dataTable id="table" value="#{sampleMB.List1}" var="cList" scrollable="true" scrollHeight="400">
<p:column headerText="column1">
<h:outputLabel value="#{cList.column1 }" rendered="#{not cList.card_slot.contains('XYZ')}" />
<p:commandLink value="#{cList.column1}" ajax="false" style="text-decoration:underline" rendered="#{cList.card_slot.contains('XYZ')}" />
</p:column>
</p:dataTable>
If you just want to enable/disable command link, you should use disabled attribute instead of rendered and remove h:outputLabel.
I've got a dynamic dataTable and would like to display different filter types depending on the column but it seems that I can only use one object within a filter facet at a time. If I try to use multiple input types I get a
java.lang.ClassCastException: javax.faces.component.UIPanel cannot be cast to javax.faces.component.ValueHolder
My current (not working) code looks like this:
<f:facet name="filter">
<p:inputText onkeyup="PF('myTable').filter()" rendered="#{column.filterType=='TEXT'}" />
<p:selectOneMenu onchange="PF('myTable').filter()" rendered="#{column.filterType=='LIST'}">
<f:selectItems value="#{column.filterMap}" />
</p:selectOneMenu>
</f:facet>
The inputText and selectOneMenus are displayed correctly, but I can't filter my table because of the ClassCast Exception.
If I only use one of the input types, the filtering works as expected.
Is it possible to conditionally show different filter facets or input types within the facet?
The only "solution" I found, is to always use selectOneMenus and make them editable and look like inputTexts if the filter type is "TEXT"
<p:selectOneMenu onchange="PF('myTable').filter()" editable="#{column.filterType=='TEXT'}" styleClass="#{column.filterType}">
following your 2nd comment I tested this code and it works; The idea is that the filter depends on the column, so:
<p:column filterBy="#{column.attribute}" filterMatchMode="contains" rendered="#{column.filterType=='TEXT'}" >
<f:facet name="filter">
<p:inputText onkeyup="PF('myTable').filter()" />
</f:facet>
</p:column>
<p:column filterBy="#{column.attribute}" filterMatchMode="equals" rendered="#{column.filterType=='LIST'}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('myTable').filter()" >
<f:selectItems value="#{column.filterMap}" />
</p:selectOneMenu>
</f:facet>
</p:column>
you show and hide the column, not the filter.
NB : The filter mode of an inputText is contains AND for a List is Equals.
I have a h:dataTable. I would like to render a row conditionally as follows:
<h:dataTable value="#{myController.entities}" var="entity">
<h:column rendered="#{entity.selected}">
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" />
</h:column>
</h:dataTable>
In my controller there is variable List <Entity> entities which has getters and setters.
Entity class contains two variables : boolean selected and String name with its getters and setters.
When #{entity.selected} is false, then the row is hidden. When #{entity.selected} is true, then the row is shown, but without header. When I do not use the rendered attribute on the column my header becomes visible.
This question is similar to p:column header facet is not shown when rendered attribute is used on p:column
But none of the solution given works for me and Iam not using primefaces.
Can somebody help me with this? Iam new to JSF and the mistake might be something silly and fix fairly easy, but please help me figure it out. Thanks.
Iam posting the outputs that I get when I tried the above code.
**Header**
name 0
name 1
name 2
name 3
name 4
This output shows the datatable using simply <h:column> without trying to render it conditionally. The header can be seen.
Now when I use conditional rendering:
name 1
name 3
In this output Iam trying to use conditional rendering <h:column rendered="#{entity.selected}">. As you can see that for "name 0", "name 3" and "name 5" the #{entity.selected} is false and hence its not rendering.
This is exactly what I need but only if the header shows up.
I want to render my row invisible where the #{entity.selected} value is false. Also show the column header. Can this be possible?
You need to put the rendered condition on the cell, not on the column.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" rendered="#{entity.selected}" />
</h:column>
</h:dataTable>
Or, if you've multiple components or plain text representing cell content, wrap it in a <h:panelGroup> or <ui:fragment>.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
<h:panelGroup rendered="#{entity.selected}">
Blah blah #{entity.name} blah blah
</h:panelGroup>
</h:column>
</h:dataTable>
(note: you don't necessarily need h:outputText over all place, see also Is it suggested to use h:outputText for everything?)
Apply if necessary the following CSS on the table to hide empty cells in case you've applied e.g. borders or bgcolors on table cells:
table {
empty-cells: hide;
}
A completely different alternative is to provide a new model which contains only the desired entities:
<h:dataTable value="#{myController.selectedEntities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
#{entity.name}
</h:column>
</h:dataTable>
Instead of
...
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
...
try simply
...
<f:facet name="header">Header</f:facet>
...
I am using rich:dataTable inside the a4j:repeat.
Every time the dataTable Scroller refer the index from the previous dataTable scroller index value. So the current dataTable having values but it displays empty table.
Because of,
previous dataTable list size is 200.
previous dataTable scroller index is 7
Current DataTable list size is 5.
<a4j:repeat value="#{Bean.outerTOList}" var="sampleValue">
<rich:dataTable id="dataTable"
var="innerTo"
rows="5"
value="#{sampleValue.sampleInnerTOList}" >
<f:facet name="header">
<rich:column>
<h:outputText value="Header"/>
</rich:column>
</f:facet>
<rich:column>
<h:outputText value="#{innerTo.name}"/>
</rich:column>
<f:facet name="footer">
<rich:datascroller id="dataTableScrollerId"
ajaxSingle="false" maxPages="3"
page="1">
</rich:datascroller>
</f:facet>
</rich:dataTable>
</a4j:repeat>
I think you have to change the <ui:repeat> to a (JSTL) <c:forEach> (see http://www.crazysquirrel.com/computing/java/jsp/jstl-forEach.jspx) because it has another lifecycle and your implementation using ui:repeat won't work in this scenario.
After doing so you probably also need some kind of "discriminator" for your IDs, because you cannot name all table components the same. You would have to use something like id="datatable0",... id="datatable1" and so on. You can use c:forEach's varStatus="status"property to do so. It has a property which you can use as the counter: #{status.index}
I need to render the <p:commandButton> at last entry of the <p:datatable> only .
consider if p:datatable having n no.of rows means i have render the p:commandButton at nth row only.
I think that you better use <f:facet name="footer">
<f:facet name="footer">
<p:commandButton/>
</f:facet>
But if you really insist on last row...
Try the rowIndexVar, something like this :
<p:dataTable value="#{myBean.myList}" rowIndexVar="rowIndex" var="item">
<p:column>
<p:commandButton rendered="#{(rowIndex+1) eq myBean.myList.size()}"/>
</p:column>
</p:dataTable>
I don't know if I got the functional requirement right, but from what I understand you want to add a single commandButton at the bottom of the table, for that you might use the following inside datatable tags:
<f:facet name="footer">
<p:commandButton/>
</f:facet>