How can I display image in a DataGrid?

Support
#1

I want to display product image in datagrid from product entity . I know how to do it in the table but would appreciate showing how it is done in datagrid. I explored the manual but no luck. Moreover, want to display the image in large size in a separate panel when single selected,

#3

Hi,

Could you clarify how image stored? Is It the FileDescriptor entity or something else?

Regards,
Gleb

#4

Hi Gleb
Yes, the image in a FileDescriptor field in Product Entity.

Regards
Mortoza

#5

Hi,

You can create a generated column to display an image component, for instance:

personsDataGrid.addGeneratedColumn("photo", new DataGrid.ColumnGenerator<Person, Image>() {
	@Override
	public Image getValue(DataGrid.ColumnGeneratorEvent<Person> event) {
		Image image = componentsFactory.createComponent(Image.class);
		image.setScaleMode(Image.ScaleMode.SCALE_DOWN);
		image.setAlignment(Alignment.MIDDLE_CENTER);
		image.setWidth("100%");
		image.setHeight("30px");

		FileDescriptor photo = event.getItem().getPhoto();
		image.setSource(FileDescriptorResource.class)
				.setFileDescriptor(photo);

		return image;
	}

	@Override
	public Class<Image> getType() {
		return Image.class;
	}
}).setRenderer(personsDataGrid.createRenderer(DataGrid.ComponentRenderer.class));

Into a separate panel, you can add an Image component connected to a collection data source, so that it will show value for a selected row.

<image datasource="personsDs" property="photo"/>

Where personsDs is a collection data source.

Regards,
Gleb

1 Like