RadioButtonGroup is enabled when I setEnabled(false) in a grid

[jcgueriaud]

When I add a disabled RadioButtonGroup column inside a grid I want a disabled radioButton.

Here a code sample for my use case:
Result: I can update the radioButtonGroup even it's disabled.

Is it normal ? Is there a workaround ?

Thanks

/**
 * The main view contains a button and a template element.
 */
@BodySize(height = "100vh", width = "100vw")
@HtmlImport("styles/shared-styles.html")
@Route("")
@Theme(Lumo.class)
public class MainView extends VerticalLayout {

    private Grid<String> grid;
    public MainView() {
        grid = new Grid<>();
        String[] data = {"OK","NOK"};
        grid.setItems(data);
        addRadioButtonContratColumn("radiocolumn");
        // Test radioButtonGroup outside GRID, --> No poblem, it's disabled
        RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup();
        String[] strings = {"OK","NOK"};
        radioButtonGroup.setItems(strings);

        radioButtonGroup.setEnabled(false);
        radioButtonGroup.setValue("NOK");
        add(radioButtonGroup,grid);


        setClassName("main-layout");
    }


    private void addRadioButtonContratColumn(String contratLibelle){

        grid.addColumn(new ComponentRenderer<>(value -> {
            RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup();
            String[] strings = {"OK","NOK"};
            radioButtonGroup.setItems(strings);
            radioButtonGroup.setValue(value);
            radioButtonGroup.setEnabled(false); // ERROR I can update the radioButton
            return radioButtonGroup;
        })).setHeader(contratLibelle);
    }
}

[pleku]

Hello @jcgueriaud. Looks like a bug to me, the radio buttons should be disabled.

I can't yet comment on a workaround, but I just have to ask the question:
Why would you want to put radio button groups inside a grid ?

[mstahv]

@pleku Isn't the use case quite obvious, you want to allow quick inline editing of the entities you display in the Grid? For OK/Not OK it might make more sense to use just checkbox, but make it a modern day sex property and you'll end up having male-female-other options, which still still fit well to desktop screen (depending on other visible columns of course).

[jcgueriaud]

Thanks for your replies.
Yes I want to quick edit my lines and I have more options than Ok/Not Ok.

For the workaround I was looking for something "inside" the component (disable an option inside the radiobutton or something else).

I can use Combobox or select but the user has to click twice.
I can also use a checkbox but I will have to uncheck the other options "manually".
I can also try to not use a grid (and create a list of components).

For the workaround that's not a big deal, I will find something ;)

[caalador]

as a workaround you can have
radioButtonGroup.setItemEnabledProvider(item -> false);

[caalador]

After some debugging the problem is that when having a disabled RadioButtonGroup setting items makes the items not disabled.

So having the items there on init makes them disabled, but if I do the following:

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup();
radioButtonGroup.setEnabled(false);
new Button("add", event -> radioButtonGroup.setItems("one", "two"));

the added items will not be disabled. (This is basically what grid does as also)

[caalador]

Created issue for the vaadin-radio-button component as the problem could be replicated directly on the client also.
vaadin/vaadin-radio-button#49

[pleku]

@pleku Isn't the use case quite obvious, you want to allow quick inline editing of the entities you display in the Grid? For OK/Not OK it might make more sense to use just checkbox, but make it a modern day sex property and you'll end up having male-female-other options, which still still fit well to desktop screen (depending on other visible columns of course).

@mstahv, sure, I'm just a bit concerned about the UX with having radio buttons inside the grid, so I had to ask.

[jcgueriaud]

Thanks for the workaround and your fast replies.