Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Date range filters in Grid component

Phesto Mwakyusa
7 years ago Jul 21, 2015 9:43pm
Krishna Kotari
7 years ago Jul 22, 2015 7:00am

Hey,

I have written some psuedo code for this, this should give you a basic idea on how to do it..

Firstly create all necessary fields basically 3 fields with start and end date along with separator label

// Create all the necessary fields b
        HorizontalLayout datefieldLayout = new HorizontalLayout();
        DateField startDateField = new DateField();
        startDateField.addStyleName(ValoTheme.DATEFIELD_TINY);
        DateField endDateField = new DateField();
        endDateField.addStyleName(ValoTheme.DATEFIELD_TINY);
        Label label = new Label("-");
        datefieldLayout.addComponent(startDateField);
        datefieldLayout.addComponent(label);
        datefieldLayout.addComponent(endDateField);

Next create a value change listener for the date fields, here the value change listener would be the same for both of the date fields, something like shown below 

private ValueChangeListener getDateFieldValueChangeListener(
            final DateField startDateField, final DateField endDateField,
            final String headerID) {
        return new ValueChangeListener() {

            /**
             * 
             */
            private static final long serialVersionUID = 1393597476958588782L;

            @Override
            public void valueChange(ValueChangeEvent event) {
                Date newStartDate = startDateField.getValue();
                Date endDate = endDateField.getValue();
                @SuppressWarnings("unchecked")
                BeanItemContainer<T> container =
                    ((BeanItemContainer<T>) getContainerDataSource());
                container.removeContainerFilters(headerID);
                container.addContainerFilter(new Between(headerID,
                        newStartDate, endDate));
                recalculateColumnWidths();

            }
        };
    }

Next assign the value change listener to the start and end Date fields

startDateField.addValueChangeListener(getDateFieldValueChangeListener(
                startDateField, endDateField, headerID));
        endDateField.addValueChangeListener(getDateFieldValueChangeListener(
                startDateField, endDateField, headerID));

Hope this helps you...
Note: I have not tested this exhasutively but it worked for basic use cases.

Thanks,
Krishna.
 

Tatu Lund
7 years ago Jul 22, 2015 8:02am
Phesto Mwakyusa
7 years ago Aug 07, 2015 6:28am
Tom Longdon
5 years ago Jul 25, 2017 10:34am
Henri Sara
5 years ago Jul 25, 2017 12:51pm

The new Vaadin Framework 8 data providers are described here and the Grid component here. When using a ListDataProvider (the default that you get with Grid.setItems(...)), a SerializablePredicate (usually written as a lambda expression) can be used - see e.g. this example (in the answer). You can then use two date fields for selecting the range, and replace the filter lambda in FilteredGridLayout.onNameFilterTextChange() with something that compares against both dates.