I have a grid, and i have set to itemdetails another grid (Since the grid of details differs from main grid i could not use TreeGrid). So when details is opened i cant scroll inner grid even my mouse is over, it scrolls main grid not the grid of details. How can i fix that?
Or can u recommend some other addons for TreeGrid?
p.s sorry for my bad english.
You can still use the TreeGrid by providing a wrapper object that is the foundation of both types - parent and children. The column configuration can get a little bit annoying but lambda instead of method references but it’s way better performance, accessibility and UX wise. And it shields you from such things as mentioned above - bugs / behavior nobody anticipated.
Can u give some example or direction for implementing a wrapper object
Grid~Wrapper~
class Wrapper {
Parent p;
Child c;
}
Why Child is not List of object. Can u explain lets say with types of vehicles.
So the tree grid represents list of types of vehicles it can be motorcycles, motor cars, trucks, and buses. When motorcycles is expanded i need to display a grid with differenet number and types of columns, next when motor cars is expaned i have to display a grid of motor cars and so on.
How would you create your wrapper object for this case?
And it would be helpful if you could include also the way how can we set Items to this tree grid.
Thank u in advance!
Different kind of columns is not possible. So either all types share a common set of columns and some stay empty or you need another approach.
vaadin24 - How do I show a tree with all kind of different nodes in Vaadin 24? - Stack Overflow Could also help you with another idea if the wrapper isn’t your style - but this won’t solve your principal problem with different columns.
That’s why for this functionality i wanted to use itemdetails. I’ve tried to set a grid to details of my main grid item, but in this case, i cant scroll inner grid. Even when my mouse is over of my inner grid it always scrolls main grid items. Any suggestions to this problem?
What you can do is set the inner grid to setAllRowsVisible(true). This will disable the scrolling from the inner grid and expand the item details area. It will be nicer to use as there is just one scrollbar instead of two nested scrolling areas.
If the dataset has too many rows to show, you can wrap the inner Grid in a div and make the div scroll.
layout.setMaxHeight("300px");
layout.addClassNames(LumoUtility.Overflow.AUTO);
The item details area has some paddings which make it a bit weird, but you could then style around those.
The item details cell padding can be disabled with
vaadin-grid::part(details-cell) {
--vaadin-grid-cell-padding: 0;
}