Multiselect Grid Checkbox Lable text

Flow
1

Hello. I am struggling with a problem I think is so simple I must be to dumb to see the solution.
I have a Grid in Multiselection mode. Works beautifully. What I need to do is remove the, “Select Row” Checkbox label text.
Help!

Thank you.

2

Hi Jon

That does not sound like something that is supposed to happen. Please see the [grid examples]
(https://vaadin.com/components/vaadin-grid/java-examples/selection), there you can see that the selection checkboxes for multi-select grids do not have a label. (the checkboxes do have a label slot, but its empty)

Could you show your implementation of the grid? Which vaadin version are you using?

3

Thank you Kaspar. I have looked at the grid examples but there is a bug in the multi select example unless I am missing something.
It is setting messageDiv.setText(message) but there is no ‘messageDiv’ object anywhere in the example. Or the entire page for that matter.
My grid class is incredibly simple which makes it even more frustrating.
I appreciate the help.
I am using Vaadin 14.1.5

/**
 * Grid of devices, handles the visual presentation 
 */
@SuppressWarnings("serial")
public class DeviceGrid extends Grid<PartnerDevice> 
{	
    @Override protected void onAttach(AttachEvent attachEvent) 
    {
   
        Partner currentPartner = CurrentUser.get();
        Utility.Verify(currentPartner != null, "Should be logged in");
        
        setSizeFull();        
        setSelectionMode(SelectionMode.MULTI);
                        
        // Add a colored bar icon in front of the Status column, css classes with the same name as the status are defined in shared-styles.css
        final String statusTemplate = "<iron-icon icon=\"vaadin:home\" class-name=\"status-icon [[item.status]
]\"></iron-icon> [[item.status]
]";        
        addColumn(TemplateRenderer.<PartnerDevice>of(statusTemplate).withProperty("status", device -> device.getStatus()))
        	.setHeader("Status");
        
        
        addColumn(device ->  device.Description).setHeader("Description")
            .setSortable(true).setResizable(true);            
        
        if( !StringUtility.isNullOrEmpty( currentPartner.Note1Name ) ) 
	        addColumn(device -> device.Note1)
				.setHeader( currentPartner.Note1Name )
				.setSortable(true).setResizable(true);

        if( !StringUtility.isNullOrEmpty( currentPartner.Note2Name ) )
	        addColumn(device -> device.Note2)
			.setHeader( currentPartner.Note2Name )
				.setSortable(true).setResizable(true);
                
    }
    
}
4

Can anyone help? We need to fix before we ship.

5

Hello, do you mean aria-label="Select Row" set on the checkboxes?
This text is not displayed in the browser and present for screen reader accessibility. We agree it’s a bit inconvenient that the text is hardcoded, especially for changing the locale.

We don’t recommend removing it, unless you have a valid reason. If you don’t care about screen readers, you can ignore it.

6

Hi Serhii, thank you for the response.
I was assuming the aria-label=“Select Row” was the reason we are getting the “…” after the check box on each row.
(please see image)
What could be causing this?
Thank you,
Jon

![Grid Problem]
(http://mwdtrading.com/images/GridProblem.png)

7

Jon,

The grid will show the eclipsis if there is not enough room for the column. Try to give it more width and see if that solves the problem.

8

Hi Jon, if your Grid is inside a Dialog, then it is a bug that I also encountered - I had opened a [github issue]
(https://github.com/vaadin/vaadin-grid/issues/1723) for it. It is already fixed and will no longer happen in one of the next minor releases.

Until then, We have been given a [workaround]
(https://github.com/vaadin/vaadin-grid/issues/1723#issuecomment-629032742):

// /frontend/styles/grid-ellipsis-workaround.css
:host([theme~="ellipsis-workaround-theme"]
) [part~="cell"]
[first-column]
 ::slotted(vaadin-grid-cell-content) {
    text-overflow: clip;
}

// load above css with @CssImport annotation on your DevicesGrid class, routed view, or the used routerLayout
// and add the theme "ellipsis-workaround-theme". You could also do this on the myDevicesGrid instance later on
@CssImport(value = "./styles/grid-ellipsis-workaround.css", themeFor="vaadin-grid")
public class MyDevicesGrid extends Grid<Devices> {
	public MyDevicesGrid() {
		addThemeName("ellipsis-workaround-theme");
		...
	}
}
9

Thanks Kaspar. Unfortunately my grid is not in a dialog and trying your solution just to see if it would work didn’t as well.

And Martin. When setting setSelectionMode(SelectionMode.MULTI) you can not specify the CheckBox’s column width that I am aware of. (If you can, please let me know.)

What if I wanted to set the text for each CheckBox? How would I go about doing that? Can you do that with the Grid?

Thank you,
Jon