Expanding only one row in PrimeFaces DataTable - jsf

I am implementing a datatable and would like to limit the user to only be allowed to expand one datatable row at a time. If a user goes to expand a second row when another row is already expanded it will collapse the first row before expanding the second. Is this possible using primefaces? I am currently using Primefaces Version 3.0

PrimeFaces is just about to release an enhancement that adds a "rowToggle" event to their row expansion component. It should be in the next release after 3.3.1. It will allow you to handle the row toggle event. Once you have the ability to handle the toggle event, you will be able to write code that will collapse all rows other than the current toggled row. See here: https://code.google.com/p/primefaces/issues/detail?id=2277 which states that it will be included in the next deployment.
Note that they've already added an example of this new event to their showcase labs: http://www.primefaces.org/showcase-labs/ui/datatableExpandableRows.jsf, so it should be forthcoming.
Alternatively, you can leverage the "onExpandStart" attribute of <p:dataTable> to invoke client side code (Javascript) to collapse any rows which are in an expanded state.

Related

How do I disable PrimeFaces column overflow hiding within a datatable

I'm currently working with a <p:dataTable> (from PrimeFaces 5.2) with many columns, and as I approach the width of the datatable's parent container, PrimeFaces starts hiding columns; unfortunately it seems to be the most important column (first on the left, a <p:datePicker>).
I've tried assigning that column a priority="1" and the other columns priority="3" as described on the ShowCase site, but the first column is still hidden.
In addition to just nesting the datatable within a <p:tabView> I've tried making the dataTable scrollable via scrollable="true" and assigning a width, or also try wrapping the datatable within a <p:scrollPanel> but the column was still being hidden in either case.
When I remove enough columns (from the right-most of the table), the hidden column will again reappear.
I'm interested in a solution that is not tied/hard-coded to a specific column, as I've run into this same issue on the 2nd column, or 3rd, depending on the resolution or browser width...I want to be sure that my users are seeing everything that was coded into the datatable, even if that means they have to scroll, rather than having a dynamic function suppress values unbeknownst to the user or myself.
Basically, I recommend to add tableStyle="width:auto" to a <p:datatable> so that you do not have to deal with the single columns width. Primefaces will handle it for you dynamically depending on the length of the column entry.

Scroll to a Specified Row in an Extended Data-Table Using AJAX4JSF and/or JSF/RichFaces

I would like to scroll automatically to a given row in a JSF/RichFaces Extended Data-table (rich:extendedDataTable). Ideally, I would like to use two extended data-tables with vertical scrollbars on both.
When I select a row in a first table the corresponding row gets selected in the second table (do this from the managed bean, by playing with the selection attribute of my table).
The second table then scrolls automatically so that the selected row becomes visible, even if hidden.
The solution should not involve the rich:datascroller, but instead use the out-of-box JSF/RichFaces vertical scrolling.
Thanks for helping!
Matthieu
So well I finally developed my own kind of scrollable datatable, playing dynamically with the "first" and "rows" tags of both the datatable and collapsible subtable.
Relevant values are dynamically computed by the managed bean.

checkbox checking lost during polling with a4j:poll

In my jsf page, there is a table using rich:dataTable, each row of table has a h:selectBoolenCheckbox, I want to use it to check some rows and then click a button to trigger action only for the checked rows.
And also there is a4j:poll component used in this page, every 15 seconds the table data will be refreshed. After that problem is coming:
my a4j:poll will invoke an action to load the latest data, the loading time need 2-4 seconds. If I click some checkbox to select some rows during the loading period, the checked checkbox will be lost after loading finish.
So do you met the same problem and how to avoid it?
Just don't update the whole table. Update only the cells which really need to be updated. You can use EL in reRender (RF 3.x) or render (RF 4.x) attribute of <a4j:poll> to dynamically populate a spaceseparated string of client IDs of all cells.

Primefaces p:lightbox being added multiple times when sorting p:datatable

I am using primefaces 3.2 and JSF 2 running on GlassFish 3.1.2 and Java 6.
I have a p:lightbox component inside the column of a p:datatable. Basically, I want the user to be able to click a p:commandbutton in a row and then display some information associated with the current row.
This works fine normally, but if the user clicks on the header for a column to sort the rows, multiple lightboxes will appear when the user next clicks a p:commandbutton to display the lightbox. This is shown in the attached image. Also, not only do multiple lightboxes get appended, but the information no longer corresponds to the row where the p:commandbutton was clicked.
My question is, how can can I get this to work to display lightboxes from inside a p:datatable and still allow the table to be sorted using ajax?
This problem occurs in all 3 versions of the lightbox, even in iframe mode.
It seems that this could be related to a problem other people had with the lightbox and pf 3: http://forum.primefaces.org/viewtopic.php?f=3&t=18184

Collapsible Panels in jsf/primefaces

So what I want is this (Just the collapsible part):
http://www.primefaces.org/showcase-labs/ui/layoutEvents.jsf;jsessionid=238C388CE45C77A9B90898A82F2340EA
With 2 differences.
I want it in a datatable
I want to make a custom button that will control whether or not they are collapsed
Is this possible if so is there a good example I can go off?
i would start by
creating the dataTable as you want it to look with the row fully 'expanded'
put the data to be toggled in a panelGroup
put some sort of toggle on the row
put an effect on the panelGroup
put an action on your toggle to show/hide the panelGroup for the row
Some component libraries have this. they call them 'expandible rows', some display the data in the row, some render the row(s) below the 'parent' one.
One issue that i found (in earlier versions) is that when you had the data display in a separate row and you had a paginator set to show a set rows to display, it would bump the last row(s) when expanding the requested row to expand. I don't know if that is still the case.

Resources