Cannot format image in DataGrid

Support
#1

It is impossible to format the image in the column/cell.
With ComponentRenderer returning Image: image is always TOP LEFT. There is no way to center it…
With ImageRederer: image underflows, it is not possible to set size nor alignment.

:frowning:
Any ideas?
Thank you.

image

#2

Hi!

You can use any component as a layout for components.
So, to display the image in the center, you can create a flexLayout as the root component. Then, simply add your image.

Here’s a code snippet:

    @Supply(to = "usersDataGrid.username", subject = "renderer")
    protected Renderer<User> usersDataGridUsernameRenderer() {
        return new ComponentRenderer<>(FlexLayout::new, (flexLayout, user) -> {
            flexLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

            Image img = new Image();
            img.setSrc("/icons/icon.png");
            img.setHeight("2em");
            img.setWidth("2em");

            flexLayout.add(img);
        });

Result:
image

Regards,
Dmitriy

#3

Hello @d.kremnev , thank you. But I guess your advice is for v2.x.
I dont have FlexLayout in v1.5.
Anyway I tried to follow you but no success. Still top left. No center-middle.
I am getting crazy of this layout/positioning stuff in v1.x.

image

Any idea how to center it?
Thank you.
Tomas

#4

Hi @tomas.klems!

For v1.5 the solution will be similar.

  1. You need to use custom columnGenerator
  2. Create a CssLayout as the root component
  3. Add some css styles to the root

Code snippet:

    @Install(to = "usersTable.avatar", subject = "columnGenerator")
    private Component usersTableAvatarColumnGenerator(final User user) {
        CssLayout layout = uiComponents.create(CssLayout.class);
        layout.setWidthFull();
        layout.setStyleName("justify-center");

        Image image = uiComponents.create(Image.class);
        // customize your image

        layout.add(image);
        return layout;
    }

Used css file:

  .justify-center {
        display: flex;
        justify-content: center;
  }

To be able to do this, you need to use an extended application theme. Documentation link: Creating a Custom Theme :: Jmix Documentation

Regards,
Dmitriy

1 Like
#5

Thank you @d.kremnev .
I managed to do the same with this code:

@Install(to = "applicationFormsTable.nationalityCurrent", subject = "columnGenerator")
    private Component applicationFormsTableNationalityCurrentColumnGenerator(final DataGrid.ColumnGeneratorEvent<ApplicationForm> columnGeneratorEvent) {
        HBoxLayout box = uiComponents.create(HBoxLayout.NAME);
        box.setHeightFull();
        box.setWidthFull();
        box.setSpacing(false);
        box.setAlignment(Component.Alignment.MIDDLE_CENTER);

        Image<RelativePathResource> image = uiComponents.create(Image.NAME);
        image.setSource(RelativePathResource.class)
          .setPath("VAADIN/themes/visaEsp-helium/images/country-flags/" + columnGeneratorEvent.getItem().getNationalityCurrent().getAlpha2Code().toLowerCase() + ".svg");
          image.setWidth("20px");
          image.setAlternateText(columnGeneratorEvent.getItem().getNationalityCurrent().getInstanceName());
          image.setAlignment(Component.Alignment.MIDDLE_CENTER);

        Label<String> label = uiComponents.create(Label.NAME);
        label.setValue(columnGeneratorEvent.getItem().getNationalityCurrent().getAlpha3Code());
        label.setAlignment(Component.Alignment.MIDDLE_CENTER);

        box.add(label);
        box.add(image);
        return box;
    }

image