Problem with Vaadin Grid with Component Renderer (blank) in Vaadin 24

Hi, i try to add Component renderer in my Grid.

the problem is, first try to load the Grid, the item seems not showing any data. but the data is not null. when i try to open the grid for the second time. it runs perfectly. (first image when try to open grid for the first time)

my code for Grid is

private void configureGrid() {

        disbursementGrid.removeAllColumns();

        disbursementGrid.addClassNames("disbursement-grid");
        disbursementGrid.setSizeFull();

        disbursementGrid.addColumn("id").setHeader("ID").setAutoWidth(true).setVisible(false);
//        disbursementGrid.addColumn("status").setHeader("Status").setAutoWidth(true);
        disbursementGrid.addColumn(new ComponentRenderer<>(item -> {
            int statusValue = item.getStatus();
            EnumAyoconnectDisbursementStatus status = EnumAyoconnectDisbursementStatus.getStatus(statusValue);
            Span span = new Span(new Text(status.getText()));
            span.getStyle().set("color", status.getColor());
            span.getStyle().set("font-weight", "bold");
            return span;
        })).setHeader("Status").setWidth("120px");
        disbursementGrid.addColumn("transactionId").setHeader("Transaction ID").setAutoWidth(true);
        disbursementGrid.addColumn("correlationId").setHeader("Correlation ID").setAutoWidth(true);
        disbursementGrid.addColumn(new LocalDateTimeRenderer<>(AyoconnectCustomerDisbursement::getRequestDateTime, dateTimeFormat)).setHeader("Request Date").setWidth("150px");
        disbursementGrid.addColumn(new LocalDateTimeRenderer<>(AyoconnectCustomerDisbursement::getResponseDateTime, dateTimeFormat)).setHeader("Response Date").setWidth("150px");
        disbursementGrid.addColumn("errorMessages").setHeader("Error Message Log").setAutoWidth(true);

        disbursementGrid.setMinHeight("300px");

        disbursementGrid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
        disbursementGrid.setColumnRendering(ColumnRendering.LAZY);

        disbursementGrid.getColumns().forEach(col -> col.setResizable(true));

    }

and im using Enum like below

public enum EnumAyoconnectDisbursementStatus {
    PROCESSING(0, "Processing", "brown"),
    SUCCESS(1, "Success", "green"),
    REFUNDED(2, "Refunded", "red"),
    CANCELED(3, "Canceled", "red"),
    FAILED(4, "Failed", "red");

    private final int value;
    private final String text;
    private final String color;

    EnumAyoconnectDisbursementStatus(int value, String text, String color) {
        this.value = value;
        this.text = text;
        this.color = color;
    }

    public int getValue() {
        return value;
    }

    public String getText() {
        return text;
    }

    public String getColor() {
        return color;
    }

    public static EnumAyoconnectDisbursementStatus getStatus(int value) {
        for (EnumAyoconnectDisbursementStatus status : values()) {
            if (status.getValue() == value) {
                return status;
            }
        }
        // Return default status if value not found
        return PROCESSING;
    }

}

thank you

Try to remove that; if this doesn’t help - it might be possible that you have clashing equals/hashcode implementations for your objects and therefore the grid fails to display data

Hi thanks for replying. I will try it when im at home.

But, yeah. I think the problem is the setColumnRendering.

the setColumnRendering is not the problem.

if the equal/hashcode is clashing then why in the second try to open the grid is working perfectly? like this picture below

Because it can’t clash with a single Item :sweat_smile:

im sorry, but im not kinda fimillar with ths case. so, what should i do then? thank you

i tested it without column rendering. and i can get the data successfuly without the problem

so, i dont think the equals/hashcode is the problem

I’m not sure what’s the problem then… I would try to minimize the renderer by removing calls to “non standard” APIs and also making it more performant by:

  • removing new Text / the string can to the constructor of the span
  • moving the color and font things to your styles.css and only apply a class name

Thanks for the reply.

i solved the problem. what i do is :
call the configureGrid() each time the data loaded. (last time i called the configureGrid() on the main component.)