Using vaadin-flow version 23, grid component (com.vaadin.flow.component.grid.Grid):
I create a Grid with a ListDataProvider.
In addition to default header row with the column names, I add an additional HeaderRow for filters:
HeaderRow filterRow = grid.appendHeaderRow();I do not set the grid's pageSize.
If my ListDataProvider contains more items that the default pageSize, I get an error:
There seems to be an error in Vaadin Grid: Cannot read properties of undefined (reading 'style') Please submit an issue to https://github.com/vaadin/flow-components/issues/new/choose
- If I set the pageSize to the size of the list in the ListDataProvider or more, the issue goes away.
- Instead of appending the filter row as a second header, if I append it as a FooterRow, the issue goes away and the filter row appears at the bottom of the grid.
I suspect that the grid client side JS assumes a single header row + pageSize of total rows during an iteration over the array of rows. Because of the second HeaderRow appended, the index of the array goes out of bounds, and the object at the index is undefined, hence the error.
I think this is a bug in the Grid component. Any help or resolution would be appreciated.
Related to this issue:
https://github.com/vaadin/flow-components/issues/3082
** Full trace:**
(index):4 There seems to be an error in Vaadin Grid:
Cannot read properties of undefined (reading 'style')
Please submit an issue to https://github.com/vaadin/flow-components/issues/new/choose
console.error @ (index):4
eval @ FlowBootstrap.js?f80c:67
eval @ vaadin-grid-styling-mixin.js?2703:63
_generateCellClassNames @ vaadin-grid-styling-mixin.js?2703:58
eval @ vaadin-grid-styling-mixin.js?2703:53
generateCellClassNames @ vaadin-grid-styling-mixin.js?2703:53
_renderColumnTree @ vaadin-grid.js?f3ae:892
eval @ vaadin-grid-column.js?9a6c:419
eval @ debounce.js?3085:36
requestAnimationFrame (async)
run @ async.js?31fe:115
setConfig @ debounce.js?3085:33
debounce @ debounce.js?3085:131
_hiddenChanged @ vaadin-grid-column.js?9a6c:414
runMethodEffect @ property-effects.js?0662:1038
runEffects @ property-effects.js?0662:140
_propertiesChanged @ property-effects.js?0662:1922
Kw.s._propertiesChanged @ FlowClient.js?2d7e:1006
_flushProperties @ properties-changed.js?2b39:384
_invalidateProperties @ property-effects.js?0662:1748
Object.defineProperty.set @ properties-changed.js?2b39:170
_visibleChildColumnsChanged @ vaadin-grid-column-group.js?797c:261
runMethodEffect @ property-effects.js?0662:1038
runEffects @ property-effects.js?0662:140
_propertiesChanged @ property-effects.js?0662:1922
Kw.s._propertiesChanged @ FlowClient.js?2d7e:1006
_flushProperties @ properties-changed.js?2b39:384
_invalidateProperties @ property-effects.js?0662:1748
Object.defineProperty.set @ properties-changed.js?2b39:170
_updateVisibleChildColumns @ vaadin-grid-column-group.js?797c:194
runMethodEffect @ property-effects.js?0662:1038
runEffects @ property-effects.js?0662:140
_propertiesChanged @ property-effects.js?0662:1922
Kw.s._propertiesChanged @ FlowClient.js?2d7e:1006
_flushProperties @ properties-changed.js?2b39:384
_invalidateProperties @ property-effects.js?0662:1748
Object.defineProperty.set @ properties-changed.js?2b39:170
eval @ vaadin-grid-column-group.js?797c:296
flush @ flattened-nodes-observer.js?064a:281
_addNodeObserver @ vaadin-grid-column-group.js?797c:305
connectedCallback @ vaadin-grid-column-group.js?797c:103
Fv @ FlowClient.js?2d7e:960
$v @ FlowClient.js?2d7e:919
ky @ FlowClient.js?2d7e:1006
UA @ FlowClient.js?2d7e:918
Rq @ FlowClient.js?2d7e:1002
gr @ FlowClient.js?2d7e:1006
lk @ FlowClient.js?2d7e:417
Jq @ FlowClient.js?2d7e:1004
Kq @ FlowClient.js?2d7e:985
Zs @ FlowClient.js?2d7e:1006
yB @ FlowClient.js?2d7e:1006
eval @ FlowClient.js?2d7e:585
tb @ FlowClient.js?2d7e:433
wb @ FlowClient.js?2d7e:869
eval @ FlowClient.js?2d7e:600
XMLHttpRequest.send (async)
(anonymous) @ VM992:1
wB @ FlowClient.js?2d7e:913
vB @ FlowClient.js?2d7e:574
Rs @ FlowClient.js?2d7e:926
sr @ FlowClient.js?2d7e:954
pr @ FlowClient.js?2d7e:921
ur @ FlowClient.js?2d7e:891
Is @ FlowClient.js?2d7e:548
Ms @ FlowClient.js?2d7e:1006
Qs @ FlowClient.js?2d7e:1006
Pb @ FlowClient.js?2d7e:948
Ib @ FlowClient.js?2d7e:668
Tb @ FlowClient.js?2d7e:1006
Nb @ FlowClient.js?2d7e:207
tb @ FlowClient.js?2d7e:433
wb @ FlowClient.js?2d7e:869
eval @ FlowClient.js?2d7e:600
d @ FlowClient.js?2d7e:704
setTimeout (async)
Qb @ FlowClient.js?2d7e:705
Kb @ FlowClient.js?2d7e:707
En @ FlowClient.js?2d7e:577
Js @ FlowClient.js?2d7e:680
ys @ FlowClient.js?2d7e:511
Bs @ FlowClient.js?2d7e:878
Gu @ FlowClient.js?2d7e:1006
eval @ FlowClient.js?2d7e:966
tb @ FlowClient.js?2d7e:433
wb @ FlowClient.js?2d7e:869
eval @ FlowClient.js?2d7e:600
eval @ Flow.js?8a1e:137
flowNavigate @ Flow.js?8a1e:120
container.onBeforeEnter @ Flow.js?8a1e:90
runCallbackIfPossible @ vaadin-router.js?6718:1370
eval @ vaadin-router.js?6718:1381
eval @ vaadin-router.js?6718:2015
Promise.then (async)
__runOnBeforeEnterCallbacks @ vaadin-router.js?6718:2012
__runOnBeforeCallbacks @ vaadin-router.js?6718:1956
__amendWithOnBeforeCallbacks @ vaadin-router.js?6718:1914
eval @ vaadin-router.js?6718:1886
Promise.then (async)
eval @ vaadin-router.js?6718:1877
Promise.then (async)
__fullyResolveChain @ vaadin-router.js?6718:1846
eval @ vaadin-router.js?6718:1766
Promise.then (async)
render @ vaadin-router.js?6718:1766
__onNavigationEvent @ vaadin-router.js?6718:2231
fireRouterEvent @ vaadin-router.js?6718:134
vaadinRouterGlobalClickHandler @ vaadin-router.js?6718:249
Show 25 more frames