How to show row number information on rich datatable? - jsf

I'm trying to show the following text on the footer of my table:
Showing 11 to 20 of 51 entries
But I can't find a way to do it. I didn't find any vars in the footer that give me those variables easily.
I also tried to create a class that inherits from ExtendedDataModel and kept the values there.
I got the number of the row from the sequenceRange in the walk method. But, apparently, the footer of the table is rendered before the walk method being called, which resulted that the info on the bottom of my page was outdated by one request.
Any suggestions on how to do this?
By the way, I'm using JSF 2.1 and RichFaces 4.3.0 Final.

You can use the built in datascroller feature of rich faces:
Update 1
The scroller has a default layout which you might not want. But you can customize it. see Scroller Facets Usage tab in this link. Copying here:
<f:facet name="pages">
<h:panelGroup>
<h:outputText value="Page "/>
<h:selectOneMenu value="#{dataScrollerBean.scrollerPage}"
onchange="#{rich:component('ds')}.switchToPage(this.value)">
<f:selectItems value="#{dataScrollerBean.pagesToScroll}" />
</h:selectOneMenu>
<h:outputText value=" of #{pages}" />
</h:panelGroup>
</f:facet>

Refer this link:
Datascroller
This example shows the number of rows in a datatable in datascroller based on size mentioned in rows attribute of dataTable.

Related

Equivalent of RichFaces 4 <rich:popupPanel> for RichFaces 3

I am looking for something like <rich:popupPanel> in RichFaces 4, but then for RichFaces 3. I haven't found anything like in documenation. There is only <rich:modalPanel> which doesn't suit my needs, because it has problems displaying my datamodel in table. The selection doesn't work, it always returns no rows selected. If I put my table component in <rich:panel> or <rich:togglePanel>, then it works fine.
Is there any popup window excluding <rich:modalPanel> in RichFaces 3?
I dont have 50 reputation to ask you more details in a comment, so i will answer directly hoping this is what you're asking about.
I think you mean that your problem is that the content of the ModalPanel is not rerendered dynamically. but for this you can wrap your table (or the components you want to update) in an <a4j:outputPanel> with ajaxRendered="true"
Setting ajaxRendered="true" will cause the <a4j:outputPanel> to be updated with each Ajax response for the page, even when not listed explicitly by the requesting component. This can in turn be overridden by specific attributes on any requesting components.
http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Containers.html#sect-Component_Reference-Containers-a4joutputPanel
In my code I have something like :
<a4j:commandLink id="timelineBtn" action="#{timelineBean.doGenerateLog}"
oncomplete="Richfaces.showModalPanel('timelinePnl');return false;"
value="#{labels['timeline.button.lbl']}"/>
that opens the modalPanel :
<rich:modalPanel style="width:800;height:600;" id="timelinePnl">
<a4j:outputPanel id="dataPanel" ajaxRendered="true">
<!-- your components to be updated go here -->
</a4j:outputPanel>
</rich:modalPanel>
So my content is updated with the results of my timelineBean.doGenerateLog method each time i open the modalPanel .

JSF - Richfaces 3.3.3 rich datatable - Both sorting and filtering with two headers?

I'm trying to add a filter to the header of each column in an existing rich:datatable in JSF. I used the Exadel demo to add the filters, which worked out just fine, but it also removed the sort functionality from the upper header. I'd like to keep the sort function in the upper label header and filter on the second inputText header.
As a quick and dirty example, this is the basic structure:
<rich:dataTable id="thetable" value="#{stuff.list}" var="s">
<f:facet name="header">
<rich:columnGroup>
<rich:column sortBy="#{s.field1}">
<h:outputText="Field 1" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<f:facet name="header">
<h:inputText value="#{stuffSorter.field1}">
<a4j:support event="onkeyup" reRender="thetable" ignoreDupResponses="true"
requestDelay="700" onComplete"setCaretToEnd(event);" />
</h:inputText>
</f:facet>
</rich:column>
</rich:dataTable>
There would be more columns, of course, and setCaretToEnd is just a Javascript function that keeps the caret at the end of the column filter. This is almost just right. I get two headers. The one at the top is the column label, the one just below is the filter, and the results are listed below that. I've built out the filtering class and it's working splendidly. However, I can't seem to find a way to get the sort function back into the topmost header. It does work if I put the "sortBy" field next to the filter box, but I'd much rather have it above, but it seems that the data being inserted in the filter column is preventing that.
Am I missing something here, or is this just not quite possible with a rich:dataTable? I'd be okay with the name + sort and then the filter on top of each other within the same header, but I'm not having luck with that, either. Trying to put both elements into the facet (outputText and inputText) never shows the outputText, even when wrapping them individually with an s:div. I'd use a bean for sorting, but strangely, the project I'm working in is using Richfaces 3.3.3 and lacks org.richfaces.component.SortOrder, although it has a number of other items within the richfaces-ui-3.3.3-final.jar.
In Richfaces 3.3, header and filter facet are supported. The content which you put in the header facet will appear at the top. Filter code you can place inside the filter facet which will appear below header. Please check this questions :Filter Facet is not working in Richface 4.3x, old format of richfaces 3.3 is shown there.
<f:facet name="filter">
</f:facet>

p:dataList inside of p:dataTable

I'm using <p:dataTable> to show the values of my files. Inside of each file is a list of metadates. I want to show each metadate as an own column beside the other columns of the file. (I excluded the other columns to make the code more readable).
So, my problem is, that with the <p:dataList> it does not show the columns. The name of the meta is the same in every metadata, if someone believes this to be the problem.
I already tried to use <p:dataTable> instead of <p:dataList>, but as my customer originally wanted to have the metadata shown as own column this would not be my preferred way, but on the other hand it is working.
<p:dataTable id="fileList" var="f" value="#{reader.files}" rendered="#{reader.showFileTable()}">
<p:dataList value="#{f.meta}" var="meta1">
<p:column>
#{meta1.value}
</p:column>
</p:dataList>
<p:column headerText="Metadaten">
<p:dataTable value="#{f.meta}" var="meta">
<p:column headerText="#{meta.name}">
#{meta.value}
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
I am really grateful for any help, how I could make the code work so that each metadate has it's own column in the fileList-dataTable.
P.S: I already tried c:forEach and ui:repeat which also didn't work.
P.P.S: I forgot to mention, that my customer sometimes don't want to see specific metadates, so it would be very nice when it is possible to do this with the suggested solution.
You can build columns dynamically in primefaces by using the <p:columns> tag see the vdl
check the primefaces showcase for an example
Suppose you have this code:
<p:dataList id="fileList" var="f" value="#{reader.files}">
<p:dataTable value="#{f.listItems}" var="meta1">
<p:column>#{meta1.value}</p:column>
<p:columns value="#{meta1.listItems}">...</p:columns>
</p:dataTable>
</p:dataList>
Dynamic columns in nested dataTable are not generated: it seems p:columns cannot refer var like "f" and "meta1".
I can understand "meta1" is not visible, because it's producing header's table, but I really can't understand why "f" is not visible at that time.
Any idea? Thanks.

Icon image for rich:dataTable similar to rich:treeNode

Is it possible to have items in a rich:dataTable display with a different icon depending on their #{bean.type} similar to how you can alter the icon in a rich:tree and rich:treeNode?
you can add a <f:facet name="header"> in your rich column that can display any HTML, or in your rich column you can have any html which could be custom images.
you can add a rendered attribute to <h:graphicImage> based on the value of #{bean.type} or #{bean.type} could be a link to the image for to get.
for example
<h:graphicImage value="/images/icons/tables/down_icon.gif" rendered="#{carsSortingBean.sortsOrders['mileage']=='descending'}" />
<h:graphicImage value="/images/icons/tables/up_icon.gif.gif"
rendered="#{carsSortingBean.sortsOrders['mileage']=='ascending'}" />
So yes. There are lots of way's to customize the output of a dataTable

<rich:datatable> and <rich:datascroller> problem

I am developing a Seam-Jsfv1.2-EJB3 web app.
I have a datatable and checkboxes in each row. Moreover, I have a datascroller at the bottom of my table as well.
My problem is when I click the next page number from the scroller, the selected checkboxes at the first page of the datatable is gone. I mean, even if they were selected, clicking the next page make them deselected. I see it by going back to the first page again by clicking the scroller.
Do you have any idea about that problem?
In order to clearify my case, I attached my code below:
<rich:dataTable
id="apiV2ProductList" rows="10" var="_apiV2Product"
value="#{apiV2ProductList.resultList}"
rendered="#{not empty apiV2ProductList.resultList}" reRender="ds">
<rich:column>
<f:facet name="header">
<h:selectBooleanCheckbox id="selectionCheckAll" onclick="selectAll()" />
</f:facet>
<h:selectBooleanCheckbox id="selectionCheck" onclick="increase(this)" value="#{_apiV2Product.selectValue}" >
</h:selectBooleanCheckbox>
</rich:column>
...
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
</rich:datascroller>
</f:facet>
Many thanks in advance.
Baris
You can extend the org.richfaces.renderkit.html.DatascrollerTemplate
write your own DataScroller for your own styling by adding a component with the below configuration in faces-config.xml
<component>
<component-type>exCustHtmlDatascroller</component-type>
<component-lass>org.jsf.common.ui.EXCustHtmlDatascroller</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.richfaces.Datascroller</component-family>
<renderer-type>exCustDataScrollerTemplate</renderer-type>
<renderer- class>org.jsf.common.ui.EXCustDataScrollerTemplate</renderer-class>
</renderer>
</render-kit>
Adding an a4j support tag between scroller has solved my problem:
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
<a4j:support event="onpagechange"/>
</rich:datascroller>
</f:facet>
However the other thing is, I am using JQuery to style my table (ex. on mouse over and out), and this time, when I click the next page of my table, the style is gone.
Any help would be great, many thanks in advance.
**
PS: BTW the wierest thing to my mind is it comes me impossible to find a solution by yourself for this kind of problems. Your creation may not always be enough to solve (at least here in my example, adding a4j:support thing) I am asking experts, how can we handle that kind of things by ourselves...
**
You don't need jQuery for styling the datatable
<rich:dataTable id="dataTable" var="x"
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
The problem you were seeing with the styles being removed is due to the nature of AJAX, and the way the table is reRendered.
Assuming you were firing the initial styling call based on some form of page onLoad, the first time the page is rendered, your styles will be applied. However, when you click the "next" button with the paginator, you are pulling a lot of new HTML down, and replacing the old HTML in the table with the newer, updated information. The proble you're seeing is that you saw styling because jQuery applied styles to the old nodes, upon reRender, those nodes are completely thrown away, along with their styling. You simply need to figure out the hook to call the "styling" method, and re-execute that call after the table is re-rendered.
Generally, I use an a4j:status tag, and set up the onstart or onstop to re-parse the table.

Resources