Как синхронизировать прокрутку содержимого двух таблиц данных вместе (ag-grid)

Я использую ag-grid в Angular и хочу иметь две таблицы данных (ag-grid) одну под другой.

Содержимое обеих таблиц данных должно перемещаться вместе, когда я делаю прокрутку в таблице 1 или таблице 2. То есть прокрутка обеих таблиц данных должна быть синхронизирована.

HTML для того же, как показано ниже:

<div>
<div id="grid-wrapper">
    <ag-grid-angular #agGrid1 id="myGrid1" class="ag-theme-balham" [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
<div id="grid-wrapper">
    <ag-grid-angular #agGri2 id="myGrid2" class="ag-theme-balham" [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
</div>

Код компонента:

this.agGrid1._nativeElement.onscroll = function() {
  this.agGrid2._nativeElement.scrollTop=this.agGrid1._nativeElement.scrollTop;
}
this.agGrid2._nativeElement.onscroll = function() {
  this.agGrid1._nativeElement.scrollTop=this.agGrid2._nativeElement.scrollTop;
}

Я попробовал этот сценарий в stackblitz. Но я не смог добиться успеха. Но попробовал аналогичный сценарий в случае двух div, и он работает для одного и того же. Ниже приведен POC, который я пробовал:

https://stackblitz.com/edit/angular-ag-grid-common-scroll?file=src%2Fapp%2Fapp.component.ts

https://angular-ag-grid-common-scroll.stackblitz.io


javascript angular html ag-grid ag-grid-angular
person Anoop Rajasekhara Warrier    schedule 28.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ag-grid имеет выровненные сетки для точно таких же требований, как и ваши. Выровненные сетки не только синхронизируют прокрутку, но и порядок столбцов, ширину и видимость.

Согласно документам -

Выравнивание двух или более сеток означает, что столбцы будут выровнены во всех сетках. Другими словами, изменения столбцов в одной сетке (ширина столбцов, порядок столбцов, видимость столбцов и т. д.) отражаются в другой сетке. Это полезно, если у вас есть две сетки, одна над другой, так что их столбцы выровнены по вертикали, и вы хотите, чтобы столбцы были выровнены.

Вы должны быть в состоянии сделать это так -

gridOptionsFirst = {
    // some grid options here
        ...
};

gridOptionsSecond = {
    // register first grid to receive events from the second
    alignedGrids: [gridOptionsFirst]

    // other grid options here
    ...
}

Подробный пример здесь

person Pratik Bhat    schedule 29.03.2020
comment
Это я уже проходил. Выровненная сетка поможет синхронизировать горизонтальную прокрутку между двумя сетками, выровненными по вертикали. Но мне нужна как горизонтальная, так и вертикальная синхронизация прокрутки. Эта функция необходима для сравнения данных в двух сетках по годам. Спасибо за ваши обновления. Если какое-либо решение, пожалуйста, обновите, пожалуйста. - person Anoop Rajasekhara Warrier; 29.03.2020