Answered: How to change the style of selected rows on button click?

I have a grid which includes a CheckBoxSelectionModel (so users can use multi-select features and have the rows checked as they select rows). I want to be able to change the style of the selected rows on a button click.

The grid populates without a problem and the checkbox selection works as well. However my ultimate goal is to make it such that if I select some of the books and then click a button, those rows have their styles changed (e.g. the book names go from being in black text to red text). It's important that this happens on button click and not on row selection). I know how to use the selection model to get the selected rows, but I dont see how I can affect their styling after the column model has already been constructed.

Is it possible to do this with GXT3, or does it require heavy customization of the grid, row or cell components? Any ideas would be greatly appreciated.

In order to accomplish this you have to create a GridView for the grid and then create your own GridViewConfig. Example code:

Code:

GridView<Book> myGridView = new GridView<Book>();
myGridView.setViewConfig(new GridViewConfig<Book>() {
@Override
public String getColStyle(Book model, ValueProvider<? super Book, ?> valueProvider, int rowIndex, int columnIndex) {
// use whatever evaluation logic you want to use - this method returns the style name to use
// in my case, I wanted the style to be different if the row was selected
if (!bookGrid.getSelectionModel().getSelectedItems().isEmpty()) {
for (Book selectedBook : bookGrid.getSelectionModel().getSelectedItems()) {
if (selectedBook.getName().equals(model.getName()) {
// i'm using name for example here, probably want this to be a key or unique value
return "selectedStyleClassName";
}
}
return "unselectedStyleClassName"; // class style for those not selected
}
return "standardStyleClassName"; // class style when nothing in the list has been selected
@Override
public String getRowStyle(Book model, int rowIndex) {
return null;
}
});

Using this technique the styles are updated whenever the view is refreshed. In practice I found that this executes anytime the view is refreshed and/or if the data in the view is updated (which I assume must implicitly force a refresh).

In order to accomplish this you have to create a GridView for the grid and then create your own GridViewConfig. Example code:

Code:

GridView<Book> myGridView = new GridView<Book>();
myGridView.setViewConfig(new GridViewConfig<Book>() {
@Override
public String getColStyle(Book model, ValueProvider<? super Book, ?> valueProvider, int rowIndex, int columnIndex) {
// use whatever evaluation logic you want to use - this method returns the style name to use
// in my case, I wanted the style to be different if the row was selected
if (!bookGrid.getSelectionModel().getSelectedItems().isEmpty()) {
for (Book selectedBook : bookGrid.getSelectionModel().getSelectedItems()) {
if (selectedBook.getName().equals(model.getName()) {
// i'm using name for example here, probably want this to be a key or unique value
return "selectedStyleClassName";
}
}
return "unselectedStyleClassName"; // class style for those not selected
}
return "standardStyleClassName"; // class style when nothing in the list has been selected
@Override
public String getRowStyle(Book model, int rowIndex) {
return null;
}
});

Using this technique the styles are updated whenever the view is refreshed. In practice I found that this executes anytime the view is refreshed and/or if the data in the view is updated (which I assume must implicitly force a refresh).