Vaadin flow : Get grid second header row components

Flow
1

Hello Team,

I have one vaadin-flow grid having the second header row (added by using appendHeaderRow() method) for searching the content of the grid and TextField added for each column to that second header row.

Now, I am trying to find/get that TextField and it’s value which is searched/entered by user. But I can’t able to get that.

Please refers to attached screen-shot.

I need to find this highlighted TextField and ultimately the searched/entered value ‘2’

Please Help
17289799.png

2

Hi!

We actually have a demo for this use-case: https://vaadin.com/components/vaadin-grid/java-examples/filtering

Basically, you create the component first to have a reference to it later on. Then you set it as the component of the header cell. There’s no need to “find” that TextField, since you already have the object reference.

3

Hello Pekka Maanpää,

Thanks for your quick response.

I am following the same scenario as you provided in above reference link to add TextFields for filtering.

You mean, I have to take TextField variables for each grid column instead of adding them run-time/dynamically using foreach loop?

Then I have to add those TextFields to grid second header row, Right?

And this way I will get TextFields object reference.

Is there any other possible way to get TextField’s value?

Please Help
Thank you very much.

4

You can use the TextField variable in the scope of the forEach loop, just like in the example. Take a closer look:

For each column:

  • Create a new TextField
  • Configure the TextField to apply filtering on the grid on value changes
  • Add the TextField to the header row

Of course you can create all of the TextFields in advance if you like. The point is just that you need to have a reference to the object to be able to configure it. It’s up to you where in the code you want to configure it.

5

Hello Pekka Maanpää,

Thanks.

Below is my code to get more insights.

HeaderRow filterRow = grid.appendHeaderRow();

grid.getColumns().forEach(column -> {	
	if (FirstColumn.equals(column) == false) {
		TextField field = new TextField();
		ValueProvider<Person, String> valueProvider = iterator2.next();
		field.addValueChangeListener(event -> dataProvider.addFilter(person -> StringUtils.containsIgnoreCase(valueProvider.apply(person), field.getValue())));
		field.setValueChangeMode(ValueChangeMode.EAGER);
		filterRow.getCell(column).setComponent(field);
		field.setSizeFull();
    } else {
		Button btnTest = new Button("Test");
		grid.getCell(FirstColumn).setComponent(btnTest);
		
		btnTest.addClickListener(e -> {			
			grid.getColumns().forEach(column -> {
				// ***I need to get here TextField searched/entered value.***
				filterRow.getCell(column);
			});
		});
	}
});

Please Help

6

Apparently the HeaderCell doesn’t have a getter for the component, so you need to do the mapping from column to text field yourself. So something like this:

Map<Column<?>, TextField> columnToFieldMap = new HashMap<Column<?>, TextField>();

grid.getColumns().forEach(column -> {	
	if (FirstColumn.equals(column) == false) {
		TextField field = new TextField();
		columnToFieldMap.put(column, field);
		...
    } else {
			grid.getColumns().forEach(column -> {
				// ***I need to get here TextField searched/entered value.***
				columnToFieldMap.get(/* the column that has the text field you want to use */);
				...
7

Exactly, I got your idea. Works properly.

May I have one/two more questions to you?

I have already post it on forum.
Please refers to below links:

Please give some hints or direction for the same.
Thanks Once Again !!!