CODEWITHSUNDEEP
vaadinvaadin-grid
Jan
Jan

Reputation: 46

How can I change a vaadin grid filter and the layout at the same time?

I have a vaadin grid with some filters on top and the filters can be displayed/hidden by a button. The problem now is that if the data source of a grid is modified and at the same time the position of the grid changes the grid is not properly redrawn. The grid only shows 5 out of 10 items and a empty line at the top.

example app

The button action is setting setVisible to false and reseting the filters.

filter.addClickListener(event -> {
    if (filters.isVisible()) {
        location.setValue(null);
        filter.setCaption("Filter");
        filters.setVisible(false);
    } else {
        filter.setCaption("Show all");
        filters.setVisible(true);
    }
});

Is there a way to mark the layout as dirty or to demand a rebuild?

PS: I have a full blown example app with the problem at https://github.com/jansauer/vaadin/tree/filtergrid/

Upvotes: 1

Views: 453

Answers (1)

kukis
kukis

Reputation: 4644

It appears the bug is caused by a bug in Vaadin UI. Simply moving your horizontal-layout with id="filters" behind the grid does the trick.

<v-vertical-layout size-full>

<v-horizontal-layout>
    <v-button _id="filter" style-name="borderless-colored">Filtern</v-button>
</v-horizontal-layout>

<v-grid _id="grid" size-full :expand />

<v-horizontal-layout _id="filters" style-name="filters" margin spacing width-full>
    <v-text-field _id="name" caption="Name" width="220px" />
    <v-combo-box _id="location" caption="Standort" />
    <v-css-layout :expand />
</v-horizontal-layout>

</v-vertical-layout>

From my almost 2 years experience with Vaadin I would discourage you from using Vaadin views based on *.html's since I often find weird bugs like this one.

Upvotes: 0

Related Questions