How to add grid filters in Vaadin 8?

Question

Vaadin 8 just came out. the adding of filters in Grid was never in their documentation, i only found one working solution here in stackoverflow.

  HeaderCell cell = filterRow.getCell(pid);
                    // Have an input field to use for filter
                    TextField filterField = new TextField();
                    filterField.setColumns(0);
                    filterField.setHeight("23");



                    // Update filter When the filter input is changed
                    filterField.addTextChangeListener(change -> {
                        // Can't modify filters so need to replace
                        b.removeContainerFilters(pid);

                        // (Re)create the filter if necessary
                        if (! change.getText().isEmpty())
                            b.addContainerFilter(
                                new SimpleStringFilter(pid,
                                    change.getText(), true, false));
                    });
                    cell.setComponent(filterField);

But now since the update, this Solution is no longer working since SimpleStringFilter is no longer available in the new grid, and BeanItemContainer are not recognized anymore and only allows setItems() to fill grid data.

Can anyone help me update this code for Vaadin 8?

Moriarty

The solution from @Patryk Krawczyk is working for one column filter but when i have two columns like FirstName and LastName it's not working. Did anyone have a solution for it? – Keim

Answer 1

It's possible to add filtering for Vaadin 8 Grid.

Let's assume we have defined Person model as:

final class Person {

    private String name;

    public Person(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

}

Our Grid implementation would look like this:

final class PersonGrid extends Grid<Person> {

    public PersonGrid() {
        List<Person> persons = new ArrayList<>();
        persons.add(new Person("foo"));
        persons.add(new Person("bar"));
        persons.add(new Person("foobar"));

        addColumn(Person::getName).setCaption("Name");

        setItems(persons);
    }

}

Now, we can create a layout with a TextField that will be our filter:

final class FilteredGridLayout extends VerticalLayout {

    private final PersonGrid personGrid;
    private final TextField nameFilter;

    public FilteredGridLayout() {
        nameFilter = new TextField();
        nameFilter.setPlaceholder("Name...");
        nameFilter.addValueChangeListener(this::onNameFilterTextChange);
        addComponent(nameFilter);

        personGrid = new PersonGrid();
        addComponentsAndExpand(personGrid);
    }

    private void onNameFilterTextChange(HasValue.ValueChangeEvent<String> event) {
        ListDataProvider<Person> dataProvider = (ListDataProvider<Person>) personGrid.getDataProvider();
        dataProvider.setFilter(Person::getName, s -> caseInsensitiveContains(s, event.getValue()));
    }

    private Boolean caseInsensitiveContains(String where, String what) {
        return where.toLowerCase().contains(what.toLowerCase());
    }

}

The result is shown below:

For empty input result is: foo, bar and foobar.

For foo result is: foo and foobar.

For bar result is: bar and foobar.

For foobar result is: foobar.

Legume

Thank you, this was the best explanation I could find on filtering after quite a bit of searching. Much appreciated. – Rooker

but it works only for one field. If you add same filter on other column it doesn't work – Zhao

Answer 2

There's Vaadin grid addon which will be ported to Vaadin 8 later, so if you have time to wait for it you can get filter row in pretty package.

https://vaadin.com/directory#!addon/gridutil

Please read here estimation of effort from author of GridUtil.

https://github.com/melistik/vaadin-grid-util/issues/37#issuecomment-282756130

Virility