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.
Related
I have a Multigrid component with 12 columns and 300 rows. When the value of one cell changed the whole component is rendered. I can see it in the profiler and visually component is scrolled to the top. Is this intended behavior and this component or maybe whole library is not suit for lists that will updates frequentelly?
P.S. every cell has unique key based on remote data. In pure react table the problem I've described is not exist.
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'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.
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.
I'm having this categorized view displayed in a view panel where the category column itself is not shown. Instead I'm displaying a combobox above the viewPanel where users can select from all the categories available (see screenshot below). The combo is bound to a scopeVariable and is refreshing the viewPanel onChange. The viewPanel has a computed categoryFilter reading from the same scopeVar. That all works nicely.
Now I also have implemented an additional wildcard (*) value in the selection list which (if selected) programmatically sets the cat filter to NULL. This way I'm forcing the viewPanel to show all entries. Again, this works fine, but with the drawback that now the view is showing empty rows where the category entries would be shown normally (in the screenshot you see empty rows above each entry, with 2 entries for the category "edcom GmbH" obviously belonging to the same category; those aren't separated by an empty row):
One way to at least hide those empty rows would be through means of css coding. But I would prefer those rows not being rendered at all.
Can this be done at all using a viewPanel, and how? Or do I have to use other controls like a repeat or a dataTable maybe?
Thanks in advance,
Lothar
One "hack" (an ugly one I admit) would be to change your categorization column from Firma to Firma:"--All--" or Firma:"*" and then instead of setting the category filter to NULL you set it to "--All--" (or "*").
The double category hits the indexer, but should do what you need.
Obviously there's no easy way. So meanwhile I'll stick to this css-style solution:
In the view panel und All Properties - data I set var = "entry". Then, under All Properties - styling I set a programatic value for the rowClasses property:
if(entry.isCategory()){
return "rowStyleHidden";
}
return "";
The style class "rowStyleHidden" hides those rows using
display: none;
Don't know yet how this turns out performance-wise, I'll have to observe this once I implement it in a copy of the real database.
You can also switch to a none categorized view, by having the viewname calculated based on the value in combobox.