Deactivating/Activating the Table row

Hello Vaadin Folks

Great going. Here’s my question.
I have a button(Activate/Deactivate Button) in the grid layout with a Table. The user selects a row by clicking in the table and the row is highlighted with a background color.

When the user clicks the deactivate button. I’d like to deactivate the current selected row , like changing the row color to gray.
When the user clicks the gray colored row(earlier deactivated) and clicks the Activate button, the row background color comes back to original color.

I tried creating table.setcellstylegenerator() in Button click listener and made changes in Style.css .

.v-table-row-gray{
background: gray;
}

But It’s completely changing the background color of all rows. Is there anyway i can just be able to change the selected table row background color to a different color dynamically?

Any different approaches or suggestions welcome.

Thanks.
Shashi

				table.setCellStyleGenerator(new Table.CellStyleGenerator() {

					public String getStyle(Object itemId, Object propertyId) {

						if (propertyId != null && table.getValue().toString().equals(itemId.toString())) {
							return "gray";
						}
						return null;
					}
				});

table.getValue() returns the current selected itemId of table. So every single cell of this selected row will be using “grey” for css styling.

Hey Oliver Webb

Thank you for your suggestion.

I couldn’t figure out way the code to be written in css.

I tried your code with the way i have written in style.css
.v-table-row-gray{
background: gray;
}

But it didn’t work. I think i’m making a mistake in the way i m handling the return string “gray” in the CSS.
Please advise.
Thanks

This should work:

.v-table-cell-content-grey {
    background: grey;
}

Im currently working on a new project and I’m also using different cell styles.

Hey Oliver Webb Thanks its working.

I found an issue in it. When i select a row and click deactivate button, the background color turns gray. And then if i select another row and click the deactivate button, the earlier gray colored background row shifts back to the original color. Why is it happening?
Did you encounter such issue? or do i need to save the gray colored row item id? Please advise

Thanks.

Everytime table.setCellStyleGenerator() is called, all cell styles are overwritten, so you have save your previously selected row.

Here is an example:

		private ArrayList<Object> deactivatedRows = new ArrayList<Object>();
		
		if (!deactivatedRows.contains(table.getValue())) {
			deactivatedRows.add(table.getValue());
		}
		
		table.setCellStyleGenerator(new Table.CellStyleGenerator() {
			
			public String getStyle(Object itemId, Object propertyId) {

            	for (Object deactivatedRow : deactivatedRows) {
                	if (deactivatedRow.equals(itemId)) {
                		return "grey";
                	}	
				}
				return null;
			}
		});

Hey Oliver Webb

Perfect , I made a small change in your code and its working perfectly.

Set setValues = (Set) table.getValue();
Iterator Itr = setValues.iterator();
while(Itr.hasNext()){

        Integer Id = (Integer)Itr.next();
        if (!deactivatedRows.contains(Id)) {
              deactivatedRows.add(Id);
         }
    }

Since table.getValue() returns an Object , i cast it to set and then added elements in set to Arraylist. Even it helps in Multiselection mode also.

Thanks a lot.