如何在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?

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 foo bar.

For bar result is: bar and foo bar .

For foobar result is: foobar .

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