Hi,
The docs for filtering with lazy loading can be found here:
https://vaadin.com/docs/-/part/framework/datamodel/datamodel-providers.html
-Olli
On https://vaadin.com/elements/-/element/vaadin-grid#demos it tells us that: “Grid allows you sort and filter data”
Unfortunately no java code is provided as to how to implement for example filtering. Instead there is only xml and I can’t use that.
How to implement filtering with grid? (I already implemented sorting and lazy loading)
Any help is appreciated.
I followed the example, but it is not working yet. We have got (in test example):
DataProvider<Image, String> dataProvider = DataProvider
.fromFilteringCallbacks(query -> {
int offset = query.getOffset();
int limit = query.getLimit();
Optional<String> filter = query.getFilter();
return ImagesRepository.findAll(filter, query.getSortOrders())
.stream().skip(offset).limit(limit);
}, query -> ImagesRepository.getImageCount());
wrapper = dataProvider.withConfigurableFilter();
AND
filterInputField.addValueChangeListener(event → {
wrapper.setFilter(filterInputField.getValue());
});
BUT
The filter value: “Optional filter” is always empty.
Does your dataprovider’s callback get triggered after the setFilter() call in the value change listener?
-Olli
Yes, it does get triggered.
@Override
protected void init(VaadinRequest vaadinRequest)
{
final VerticalLayout layout = new VerticalLayout();
makeMap();
Panel mapPanel = new Panel();
mapPanel.setSizeFull();
mapPanel.setContent(leafletMap);
layout.addComponent(mapPanel);
filterInputField = new TextField();
filterInputField.setCaption("Namen der Bilder Filter");
layout.addComponent(filterInputField);
Grid<Image> imgGrid = makeLazyTable();
Panel lazyPanel = new Panel();
lazyPanel.setSizeFull();
lazyPanel.setContent(imgGrid);
layout.addComponent(lazyPanel);
filterInputField.addValueChangeListener(event -> {
wrapper.setFilter(filterInputField.getValue());
});
setContent(layout);
}
private Grid makeLazyTable()
{
Grid grid = new Grid<>(Image.class);
grid.setColumns(“filename”, “orientation”, “latitude”, “longitude”,
“image”);
grid.setColumnOrder(“filename”, “orientation”, “latitude”, “longitude”,
“image”);
grid.getColumn(“filename”).setCaption(“Dateiname”).setSortable(false);
grid.getColumn(“orientation”)
.setSortProperty(Sortorder.Orientation.toString());
grid.getColumn(“latitude”).setCaption(“Breitengrad”)
.setSortProperty(Sortorder.Latitude.toString());
grid.getColumn(“longitude”).setCaption(“Längengrad”)
.setSortProperty(Sortorder.Longitude.toString());
grid.getColumn(“image”).setCaption(“Foto”).setSortable(false)
.setRenderer(new ImageRenderer());
grid.addSelectionListener(event -> {
Image selectedImage = event.getFirstSelectedItem().get();
Double latitude = selectedImage.getLatitudeDouble();
Double longitude = selectedImage.getLongitudeDouble();
if (latitude != null && longitude != null)
{
showMarkerInMap(latitude, longitude, selectedImage.getFilename(),
"latitude = " + latitude + "<br>longitude = " + longitude);
}
else
{
showMarkerInMap(0, 0, "selectedImage.getFilename()",
"keine Angaben");
}
});
// as prepared Column:
// Column<Image, String> filenameColumn =
// grid.addColumn(Image::getFilename);
// Group headers by joining the cells
HeaderRow groupingHeader = grid.prependHeaderRow();
HeaderCell personCell = groupingHeader.join(
groupingHeader.getCell("filename"),
groupingHeader.getCell("orientation"),
groupingHeader.getCell("latitude"),
groupingHeader.getCell("longitude"));
personCell.setText("Bilder");
DataProvider<Image, String> dataProvider = DataProvider
.fromFilteringCallbacks(query -> {
int offset = query.getOffset();
int limit = query.getLimit();
List<QuerySortOrder> sortOrders = query.getSortOrders();
Optional<String> filter = query.getFilter();
return ImagesRepository.findAll(filter, sortOrders)
.stream().skip(offset).limit(limit);
}, query -> ImagesRepository.getImageCount());
wrapper = dataProvider.withConfigurableFilter();
grid.setDataProvider(dataProvider);
grid.setWidth(1200, Unit.PIXELS);
return grid;
}
see screenshot attached
Hi,
I found the bug!
“wrapper” is the new DataProvider (not “dataProvider” anymore) and has to be put into the grid:
grid.setDataProvider(wrapper);