Access components in grid

Flow
1

Hello,

just for understanding I want to develop a grid from some objects and then adding a column with a checkbox to it.

Therefor I got the following:

deviceList.setItems(List);
		
		add(deviceList, buttons);
		deviceList.removeAllColumns();
		deviceList.addColumn(Device::getName).setHeader("Device name").setKey("name");
		deviceList.addColumn(Device::getLast).setHeader("Last heartbeat").setKey("last");
		deviceList.addColumn(new ComponentRenderer<>(device ->  {
			Checkbox check = new Checkbox();
			check.setEnabled(false);
			return check;		
		}));

I now want to implement, that if I select a row, the corresponding checkbox will be also selected.

Best regards!

2

If you are attempting to implement column of check boxes mimicing selection column on the right instead having the default one on the left side the code would be something like this:

grid.addColumn(new ComponentRenderer<Checkbox,Device>(device ->  {
	Checkbox check = new Checkbox();
	check.setEnabled(false);
	grid.addSelectionListener(event -> {
		if (event.getAllSelectedItems().contains(device)) {
			check.setValue(true);
		} else {
			check.setValue(false);
		}
	});
	check.addValueChangeListener(event -> {
		if (event.isFromClient()) {
			grid.select(device);
		}
	});
	return check;		
})).setWidth("50px").setHeader("Select");
3

Tatu Lund:
If you are attempting to implement column of check boxes mimicing selection column on the right instead having the default one on the left side the code would be something like this:

grid.addColumn(new ComponentRenderer<Checkbox,Device>(device ->  {
	Checkbox check = new Checkbox();
	check.setEnabled(false);
	grid.addSelectionListener(event -> {
		if (event.getAllSelectedItems().contains(device)) {
			check.setValue(true);
		} else {
			check.setValue(false);
		}
	});
	check.addValueChangeListener(event -> {
		if (event.isFromClient()) {
			grid.select(device);
		}
	});
	return check;		
})).setWidth("50px").setHeader("Select");

Thank you very much. That does perfectly fine.

I hoped the solution would answer another question but it doesn’t.
Since the grid is build out of two diffrent classes I have no clue how to get the Values from the selected row.
Something like adding a new Button on the page which pushs the value in the first column of an selected row to the page:

	Button button = new Button();
	add(button);
	button.addClickListener(e -> {
		//Some code to get the the data from the first column of the selected row
		add(/*the data*/);
	});
4

You don’t have to access the Component in the grid-row, but instead you can access the value of the selected item. They should always match, because the component should only show the value of the column-property of the item anyways.

As an example, let’s assume you have a Grid<Person> and Person has a firstName. If you want to “push the firstName of a selected row to the page”, then you don’t read the value from the TextField Component inside the grid, but you read the value from the actual Person item.

button.addCLickListener(e -> {
	// retrieve firstName of selected row
	Person selectedPerson = grid.getSelectedItems().iterator().next(); // not sure if this line works, may need testing
	if(selectedPerson != null){
		// add the data
		add new Div(selectedPerson.getFirstName());
	} else {
		// no selection
	}
}
5

You don’t have to access the Component in the grid-row, but instead you can access the value of the selected item. They should always match, because the component should only show the value of the column-property of the item anyways.

As an example, let’s assume you have a Grid<Person> and Person has a firstName property. If you want to “push the firstName of a selected row to the page”, then you don’t read the value from the TextField Component (or whatever component it may be) inside the grid, but you read the value from the actual Person item.

button.addCLickListener(e -> {
	// retrieve firstName of selected row
	Person selectedPerson = grid.getSelectedItems().iterator().next(); // not sure if this line works, may need testing
	if(selectedPerson != null){
		// add the data
		add new Div(selectedPerson.getFirstName());
	} else {
		// no selection
	}
}