0

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
sotn
  • 1,833
  • 5
  • 35
  • 65

2 Answers2

2

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • BalusC, the table rows are added asynchronously when the user clicks a button to trigger an action. So the entire table is not loaded when the view is loaded. So, user enters data,clicks button first row is populated. User enters data again and clicks button and second row is added to the table and so on. By using rowclasses I would have to add a row class for each row and make sure I delete those rowclasses when the user deletes a row. I will anyway give it a try and see how it works. – sotn Nov 03 '11 at 13:22
  • Are you using JSF ajax for this or some 3rd party JavaScript library/framework? – BalusC Nov 03 '11 at 13:25
  • Well, then the view is in sync with model, so I don't forsee problems. – BalusC Nov 03 '11 at 13:33
  • Ok, so this is what I tried. In the action triggered by the button to add rows, lets say 'addRows', I create a StringBuffer. When data meets/fails criterion I append the appropriate styleclass to the StringBuffer and call Table.setRowClasses(StringBuffer.toString()). But the most recently appended styleclass overrides all other styclasses and makes all the rows the same style. – sotn Nov 03 '11 at 13:50
  • I should also mention that the button is an a4j:commandButton that uses the render attribute to rerender the Table onclick. – sotn Nov 03 '11 at 13:52
  • Then your logic to maintain and update the rowClasses value is just wrong. Perhaps you're creating a brand new string or you aren't taking the old rows into account. Who knows. Just run a debugger. – BalusC Nov 03 '11 at 13:57
  • @BalusC This answer, combined with the detail you provided on a different question really helps understand the whole usage of rowClasses. [http://stackoverflow.com/questions/11038769/jsf-changing-datatable-cell-color-dynamically] – Revoman May 14 '14 at 22:38
0

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.

sotn
  • 1,833
  • 5
  • 35
  • 65