Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Answers
    4
    Vote Rating
    0
    BionicGeek is on a distinguished road

      0  

    Default 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:

    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);
    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.

  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:

    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).

  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    19
    Answers
    4
    Vote Rating
    0
    BionicGeek is on a distinguished road

      0  

    Default


    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:

    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).

Tags for this Thread