I have a rich:extendedDataTable and a a4j:commandButton outside this table. When clicking the button, I want to rerender only one row and not the whole table so that the scroll remains on my selected row.
For that, I implemented the solution proposed on this other thread: reRender a specific row of rich:dataTable
It worked but it has a terrible side effect. I only rerender one cell and upon being rerendered, the cell shows a bit odd and it's not aligned anymore with the rest. Checking the source, I noticed that this rendered cell now has a <td class="rich-table-cell"...>and the other cells have <td class="extdt-cell rich-extdt-cell" ...>. So the rerender gives my cell a rich:dataTable class name instead of the rich:extendedDataTable class name that it belongs to.
Any ideas why and what should I do to have it rerender with the correct class?
Related
I have p:dialog, inside there is p:panelGrid, and one of column is p:dataTable. Datatable has selectionmode single. Problem is: dataTable loses all styling it defaulty had (it looks like pure unstyled html table). Also when i click row in dataTable, row is invisible, no data is shown. Also rowSelect functionally works, because data from selected row displays in input fields in another outputPanel correctly. Its just invisible
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.
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.
<h:dataTable width="100%" border="1" cellspacing="0"
cellpadding="2" style="border-collapse:collapse;display:block"
styleClass="Header" value="#{adminBean.displayResults}"
var="aResult" binding="#{adminBean.browseResultsHTMLDataTable}">
This is what i am trying to do. I have a dynamic list of data, which i try to display in the HTML Table format using h:dataTable (the bounded value is an arrayList). The table has got a radio button for each row it displays (boolean w/ h:selectOneRadio ) now when i select the radio button in one of these rows, i want to get the values of the row that is selected for which i try to use binding attribute. But i get Row Unavailable exception - is my approach wrong? any suggestions?
Selecting rows by radio button in a datatable is a tricky task since the radio buttons aren't grouped. Long story short: Select row by radio button.
I think you can use <t:selectOneRadio> with layout="spread" and then <t:radio> on each row.