Сетка с 2 строками заголовка (столбцы + строка фильтра) вызывает ошибку на стороне клиента (js), когда количество элементов > pageSize
Используя vaadin-flow версии 23, компонент сетки (com.vaadin.flow.component.grid.Grid):
Я создаю Grid с помощью ListDataProvider.
В дополнение к строке заголовка по умолчанию с именами столбцов я добавляю дополнительную строку заголовка для фильтров:
HeaderRow filterRow = grid.appendHeaderRow();Я не устанавливаю размер страницы сетки.
Если мой ListDataProvider содержит больше элементов, чем размер страницы по умолчанию, я получаю сообщение об ошибке:
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
- Если я установлю pageSize на размер списка в ListDataProvider или больше, проблема исчезнет.
- Вместо добавления строки фильтра в качестве второго заголовка, если я добавлю ее как FooterRow, проблема исчезнет, и строка фильтра появится внизу сетки.
Я подозреваю, что JS на стороне клиента сетки предполагает одну строку заголовка + pageSize от общего количества строк во время итерации по массиву строк. Из-за добавленного второго HeaderRow индекс массива выходит за границы, а объект в индексе не определен, отсюда и ошибка.
Я думаю, что это ошибка в компоненте Grid. Любая помощь или решение будут оценены.
Связанные с этой проблемой:
https://github.com/vaadin/flow-components/issues/3082
** Полная трассировка: **
(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