IgxGridを複数個置いてスクロールを同期させたい場合は、IgxGridのgridScrollイベントを使ってそれぞれのスクロール位置を同じ値にします。

スクロール位置は、IgxForOfディレクティブで制御できます。IgxForOfディレクティブは縦スクロール用と横スクロール用とそれぞれ別にあり、IgxGridのverticalScrollContainer、headerContainerでアクセスできます。

<!-- テンプレート(app.component.html)側 -->

<!-- 1つ目のグリッド -->
<div class="my_wrapper">
  <igx-grid #grid1 [data]="data1" height="300px" width="600px"
    [primaryKey]="'ID'" [autoGenerate]="true"
    (gridScroll)="onScroll(grid1, $event)">
  </igx-grid>
</div>

<!-- 2つ目のグリッド -->
<div class="my_wrapper">
  <igx-grid #grid2 [data]="data2" height="300px" width="600px"
    [primaryKey]="'ID'" [autoGenerate]="true"
    (gridScroll)="onScroll(grid2, $event)">
  </igx-grid>
</div>
// ソース(app.component.ts)側

@ViewChildren(IgxGridComponent) grids!: QueryList<IgxGridComponent>;

public onScroll(scrolledGrid: IgxGridComponent, args: IGridScrollEventArgs){
  this.grids.forEach(grid => {
    if(grid !== scrolledGrid){
      const igxForOf = (args.direction === 'vertical' ? grid.verticalScrollContainer : grid.headerContainer);
      if(igxForOf.scrollPosition !== args.scrollPosition){
        igxForOf.scrollPosition = args.scrollPosition;
      }
    }
  });
}

 

実行結果

 

サンプル

 

※ViewChildでIgxGridを個別に取得する場合は、こちらのサンプルをどうぞ。

 

APIリファレンス

 

Tagged:

製品について

Ignite UI for Angular