-
10 Jan 2013 8:56 AM #1
Answered: How to change the style of selected rows on button click?
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.
Example grid configuration:
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.Code:// assume this list store is properly populated ListStore<Book> bookStore = new ListStore<Book>(props.key()); IdentityValueProvider<Book> identity = new IdentityValueProvider<Book>(); final CheckBoxSeelctionModel<Book> sm = new CheckBoxSelectionModel<Book>(identity); ColumnConfig<Book, String> nameColumn = new ColumnConfig<Book, String> (props.name(), 50, "Name"); List<ColumnConfig<Book, ?>> configs = new ArrayList<ColumnConfig<Book, ?>>(); configs.add(sm.getColumn()); configs.add(nameColumn); ColumnModel bookModel = new ColumnModel<Book>(configs); Grid<Book> bookGrid = new Grid<Book>(bookStore, bookModel); bookGrid.setSelectionModel(sm); sm.setSelectionMode(SelectionMode.MULTI);
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.
-
Best Answer Posted by BionicGeek
I was able to find a solution based on a SO post.
In order to accomplish this you have to create a GridView for the grid and then create your own GridViewConfig. Example code:
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).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; } });
-
10 Jan 2013 11:29 AM #2
I was able to find a solution based on a SO post.
In order to accomplish this you have to create a GridView for the grid and then create your own GridViewConfig. Example code:
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).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; } });


Reply With Quote