Hello dear vaadin forum users! I’m trying to implement specific grid filter. Task description:
I have 3 different views, each view has own grid and I want to filter each grid by all columns using only 1 text field. I already created [thread]
(https://vaadin.com/forum/thread/18338242/grid-filter-by-all-columns-using-only-one-filter-field) where tried to found a solution for that and i found it, but now i faced another issue. When i enter text in my text field data in a grid not updates, but in a debug i see that right data setups to the grid, it not updates visually, only after refresh page by using browser it starts working, but then not works for another view.
I have main layout, inside i have tabs, when tab is changed i’m getting instance of current displayed view, and call filter method for specific view. This is how i implemented filter different grids by using only 1 text field. Actually it filters only current displayed grid.
This is my main layout:
@PWA(name = "Tour Manager", iconPath = "img/icons/android-chrome-512x512.png", shortName = "TM")
public class MainLayout extends AppLayout {
IFilter current;
static List<IFilter> views = new ArrayList<>();
public static void registerView(IFilter view) {
views.add(view);
}
public static void removeView(IFilter view) {
views.removeIf(v -> v.equals(view));
}
public MainLayout() {
initHeader();
}
private void initHeader() {
var main = new Tab();
main.setId(MainView.class.getName());
var toursList = new Tab();
toursList.setId(ListToursView.class.getName());
var driversList = new Tab();
driversList.setId(ListDriversView.class.getName());
var guidesList = new Tab();
guidesList.setId(ListGuidesView.class.getName());
var test = new Tab();
main.add(new RouterLink("Main", MainView.class));
toursList.add(new RouterLink("Tours", ListToursView.class));
driversList.add(new RouterLink("Drivers", ListDriversView.class));
guidesList.add(new RouterLink("Guides", ListGuidesView.class));
test.add(new RouterLink("TEST", TestView.class));
var tabs = new Tabs(main, toursList, driversList, guidesList, test);
// initialize current field dynamically, based on selected tab
tabs.addSelectedChangeListener(e -> {
var currentTab = e.getSelectedTab();
views.forEach(v -> {
var tabId = currentTab.getId();
if(tabId.isPresent()) {
if (v.getClass().getName().equalsIgnoreCase(tabId.get())){
current = v;
break;
}
}
});
});
var hl = new HorizontalLayout(tabs);
hl.setWidthFull();
hl.setAlignItems(FlexComponent.Alignment.START);
var changeTheme = new Button("Dark side");
changeTheme.addThemeVariants(ButtonVariant.LUMO_SMALL);
changeTheme.addClickListener(click -> {
ThemeList themeList = UI.getCurrent().getElement().getThemeList(); //
if (themeList.contains(Lumo.DARK)) { //
themeList.remove(Lumo.DARK);
changeTheme.setText("Dark side");
} else {
themeList.add(Lumo.DARK);
changeTheme.setText("Light side");
}
});
var logout = new Button("logout");
logout.addThemeVariants(ButtonVariant.LUMO_SMALL);
logout.addClickListener(click -> {
Notification.show("Not implemented yet", 3000, Notification.Position.MIDDLE);
});
var filterField = new TextField();
filterField.setPlaceholder("type to filter table");
filterField.setValueChangeMode(ValueChangeMode.EAGER);
filterField.addValueChangeListener(text -> {
if (current != null)
if (text.getValue() == null || text.getValue().isEmpty())
current.updateGrid();
else
current.filter(text.getValue());
});
var hl2 = new HorizontalLayout(filterField, changeTheme, logout);
hl2.setAlignItems(FlexComponent.Alignment.BASELINE);
addToNavbar(hl, hl2);
}
}
It has text field in header, when another tab is pressed i’m getting instance of view, which currently displayed.
i have interface where 2 methods are defined, first used to get all entities and set that list to the grid. Second used for fill grid with specific data (based on text in text field) it looks like this:
public interface IFilter {
void filter(String text);
void updateGrid();
}
My views with grid implements this interface:
@Override
public void filter(String string){
grid.setItems(tourService.filter(string));
}
this method is called each time when user enters text in text field, defined in main layout.
filter method in service works like this:
public List<Tour> filter(String string){
var list = tours.stream()
.filter(tour -> tour.toString().toLowerCase().matches("(.*)"+string.toLowerCase()+"(.*)"))
.collect(Collectors.toList());
return list;
}
In each view i’m calling MainLayout.registerView(this); to add instance of view to the list. something like factory method.
What i don’t understand is why grid changes data visually only after refresh page using browser?
In attachments can be found screen shots, where debug session displays that collection of items is updated, but visually nothing change, after refresh page and press on tab again it starts working, but for another tab it not works, even if current object changes on tab change. To try this out you can clone project from [github]
(https://github.com/code-6/tourManager.git) and chekout ft_filter-tours-list branch, after start application navigate to localhost by port 9105. To reproduce issue choose Tours or Drivers tab and start typing to header text field
