Date range filters in Grid component

Vaadin 6 / 7 / 8
1

Hello, I am using the Grid component in Vaadin 7.5.x, with several columns on it, I have impelemented a filter row, but I need to have date range filters like in the
demo
.

How to achieve that? is there a source code or sample? or help from anybody who might know how it is done.

I have attached the image of the demo date range filter as seen from the demo website

Regards.
20906.jpg

2

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

[code]
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();

        }
    };
}

[/code]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.

3

Yes. Date is comparable so, all Compare filters can be used with them.

4

Thanks for the help

5

How can you do this in Vaadin 8 now that the methods used in this example have been deprecated?

6

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.