Component selection from ComponentRenderer in grid

Flow
1

Hello,
I have problem with using ComponentRenderer in columns in Grid. By ComponentRenderer I’m adding Label component, it is drawing correctly but when i click on this label in grid then row isnt selecting, i must to click net to label to select row + sorting isn’t working. Is there any option to select row by clicking on Label or to return in ComponentRenderer only text that must be shown in grid without packing it into label.

I’m using ComponentRenderer as universal renderer that is creating checkboxes when column type is Boolean so i cant change it to text renderer.

2

Hi,

In Vaadin 14, you should use the Label class only for a html label (linked to html input).
So when you clicked on the Label Vaadin, it should focus the associated input.
In the Grid, when you use a component with a behavior on click (like Label, Button, Combobox), it doesn’t fire the selection automatically.

You can replace the Label to a Span and it should work out of the box. For the checkbox it won’t (if you click on the checkbox it will toggle the checkbox) but you can select the row manually if needed.

For the sort, by default you can sort a column with a component renderer because Vaadin doesn’t know on which property you should sort. You can add setSortProperty.

Here is an example:

messageBeanGrid = new Grid<>();
        messageBeanGrid.setItems(createMessages());
        messageBeanGrid.addComponentColumn(item -> {
            Button button1 = new Button(item.getMessage());
            // fire the selection even if you click on this button
            button1.addClickListener(event -> messageBeanGrid.select(item));
            return button1;
        });
        //fire the selection and sort by message
        messageBeanGrid.addComponentColumn(item -> {
            Span span = new Span(item.getMessage());
            return span;
        }).setSortProperty("message").setHeader("Message");
        // this column does not fire the selection
        messageBeanGrid.addComponentColumn(item -> {
            Label label = new Label(item.getMessage());
            return label;
        }).setHeader("Message");
        messageBeanGrid.setSelectionMode(Grid.SelectionMode.SINGLE);

Note: A componentRenderer is really slower then a TextRenderer, so if you have performance problem then you should consider a TemplateRenderer or a textRenderer when you don’t need to render a checkbox.

3

Thx for span advice it worked perfectly. But i have still problem with sorting becouse i can’t use setSortProperty becouse sometimes value in column can be set by function and it doesnt have any getter or setter and property that i could use.

4

You can see all the different options to sort a column here: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid.html#column-sorting

If you’re stuck, you can add an example here.

5

I added Comperator and now everything is working beautiful, I added aswell Textrendere where i dont need to use COmponent renderer according to your advice. Big thanks for help