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.
Related
I have a p:dataTable. In this table, I have a checkbox in a column. This is the code:
<p:selectBooleanCheckbox
value="#{var.selected}"
itemLabel="#{var.description}"
/>
After I add a row and update the whole table, the selected checkboxes after the row inserted have the checks shifted up! But it's only a graphical problem! The checkboxes that now appears unchecked are yet checked, because I show other things in the row if the checkbox is selected. On the contrary, the checkbox that now appear checked do not show the additional components.
I checked the html, and the classes and attributes that make them checked disappears. But debugging the backend I see that the in the list connected to the table, after the add, all the items have the expected value.
This is a minimal reproducible example:
https://ufile.io/6a60kxpn
I don't know why, but I solved putting process="#this" to the actionButtons. If someone can explain me why, I'll accept the answer.
I have an editable Primefaces Datatable configured to call an onCellEdit() method when a cell is edited. Everything works great except that CellEditEvent.rowKey is always null in spite of setting it explicitly to a valid value in the Datatable declaration with 'rowKey='. The Primefaces Datatable documentation leads me to believe that I need the rowKey to get the contents of the row containing the cell being edited. I need the entire row's contents so I can compare the displayed data with the same data in the database to determine if the persisted data had been changed by another client since the Datatable was rendered, catching concurrent edits.
After reading a dozen or more posts on the rowKey being null with row-selectable Datatables I finally realized that rowKey is populated on row select, not on cell edit. rowIndex, however, is not null on cell edit, and reliably gives me the row number (zero-based) so I can retrieve the entire row's contents, and the values of the object used to populate the row (which in my case includes the value I wanted to put into rowKey) from Datatable.getValue(). The purpose of rowKey is not clear in the documentation (to me), so I thought I would share this for anyone encountering a similar problem.
The root cause has been explained by #snakedog already. I will add the code for remedying the issue.
Here is the attribute that you should put within p:datatable:
selectionMode="single"
If you do not want the selection highlight to be seen visually, add disabledSelection="true" as well.
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.
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.
I am using an h:datatable which shows a summary of the data entered by a user in a session. The rows of the table are deletable at the users discretion. if the data meets certain criterion, the specific row in the table must be in red font color, else it should be black.
The methods I have tried so far are:
- Set the style value for h:outputtext component in each column value to red programmatically. But this changes entire columns color.
- Set the rowclasses programmatically, this again changes the style for all previous rows.
I am unable to target just one row or cell. I thought about using javascript, but without the id of the component I am not sure how to get the element.
Thanks.
Use the rowClasses attribute.
<h:dataTable value="#{bean.items}" var="item" rowClasses="#{bean.rowClasses}">
The getRowClasses() must return a comma separated string of CSS class names which are to be applied on rows (more specifically, the <tr> elements) repeatedly. You can create it based on the items inside bean's (post)constructor, action methods and/or even inside the getter.
For some reason, the StringBuffer was being overwritten thats the reason the change wasn't showing. I went with a simpler approach of adding an alert img to the rows that needed to be modified.