Show/Hide Buttons in Grid depending on data in Vaadin 8

General
1

Hello all,

I have a Vaadin Grid initialized as such:

Grid<Item> gridMain = new Grid<>();

Now, I can show certain Values depending on data in other fields:

gridMain.addColumn(item -> {
            if (item.getDescription() != null) {
                if (item.getDescription().matches("^
[/][^/]
.*")) {
                    return "Whatever";
                } else if (item.getDescription().matches("^
[//].*")) {
                    return "Whatever2";
                } else {
                    return "Whatever3";
                }
            } else {
                return "";
            }
        }).setCaption("DESCRIPTION");

What I like to do is show/hide a button depening on data (in the example when the getAvailableCases method return a value > 0, I have this so far:

[code]
gridMain.addColumn(

        item -> "Column_header",    
        new ButtonRenderer(      
            clickEvent -> {
            if(((Item)clickEvent.getItem()).getAvailableCases() > 0) {
                //Whatever Action
            }
        })         
    ).setCaption("WHATEVER");

[/code]Any ideas?

2

How about a style generator? You could set the button element’s
display
 to
none
 based on a class name you give to it for specific rows. Take a look a
https://vaadin.com/docs/-/part/framework/components/components-grid.html#components.grid.stylegeneration.row

Best regards,

Olli

3

Hi Olli,

That is a good idea and thanks for the reply.

That said, would you know how to incorporate that in the code using the double lambda expression shown above?

Thanks!

4

Hi,

once you have added the style class name, like in the above linked example, take a look at your app in Chrome dev tools or similar and find the class name on your Grid. Start tweaking with styles until you find the correct element you want to hide. You could start with something like

.myclassname {
  display: none;
}

and add more specific rules until you hit the Button element you want.

-Olli

5

Hi Olli,

I appreciate the help and will be using it. That said my main issue is how to code implementing a different style based on data present in the column and not on a click event. In the below example I’m only dealing with click events that happen
after
 the button is clicked.

So:

gridMain.addColumn(
          
            //Somewhere in here I'm having issues trying to code the
            //different .addStyleName("XXXXX") formatting based on data.
            item -> "Column_header",    
            new ButtonRenderer(      
                clickEvent -> {
                if(((Item)clickEvent.getItem()).getAvailableCases() > 0) {
                    //Whatever Action
                }
            })         
        ).setCaption("WHATEVER");

Please let me know if I’m still not being clear.

Thanks!

6

Hi,

You don’t need to do it in the addColumn lambda, use the setStyleGenerator instead. You get the row item there as well as the lambda parameter.

-Olli

7

Great!

8

Olli,

I followed your instrucions:

gridMain.setStyleGenerator((item -> { if ( item.getAvailableCases() > 0 ) { return "v-grid1"; } else { return "v-grid2"; } })); Then I just modified the Css this way for the v-grid2 class:

.v-nativebutton{ display: none; } Works perfectly, thanks for your help!