
# Grid Scroll Synchronization

You can synchronize horizontal and vertical scrolls to scroll multiple grids simultaneously.

```js
const fields = [
  { fieldName: 'Domestic/Import' },
  { fieldName: 'Country' },
  { fieldName: 'Brand Number' },
  { fieldName: 'Brand Name' },
  { fieldName: 'Model Number' },
  { fieldName: 'Model Name' },
  { fieldName: 'Color Number' },
  { fieldName: 'Color' },
  { fieldName: 'Sale Date', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd' },
  { fieldName: 'Sale Quantity', dataType: 'number' },
  { fieldName: 'Vehicle Price', dataType: 'number' },
  { fieldName: 'Vehicle Type' },
  { fieldName: 'Fuel' }
];

const columns = [
  { name: 'Domestic/Import', fieldName: 'Domestic/Import', width: 100, header: { text: 'Domestic/Import' } },
  { name: 'Country', fieldName: 'Country', width: 70, header: { text: 'Country' } },
  { name: 'Brand Number', fieldName: 'Brand Number', width: 70, header: { text: 'Brand Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Brand Name', fieldName: 'Brand Name', width: 100, header: { text: 'Brand Name' } },
  { name: 'Model Number', fieldName: 'Model Number', width: 70, header: { text: 'Model Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Model Name', fieldName: 'Model Name', width: 150, header: { text: 'Model Name' } },
  { name: 'Color Number', fieldName: 'Color Number', width: 70, header: { text: 'Color Number' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Color', fieldName: 'Color', width: 100, header: { text: 'Color' } },
  { name: 'Sale Date', fieldName: 'Sale Date', width: 100, header: { text: 'Sale Date' } },
  { name: 'Sale Quantity', fieldName: 'Sale Quantity', width: 70, header: { text: 'Sale Quantity' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Vehicle Price', fieldName: 'Vehicle Price', width: 100, header: { text: 'Vehicle Price' }, styles: { numberFormat: '#,##0', textAlignment: 'far' } },
  { name: 'Vehicle Type', fieldName: 'Vehicle Type', width: 100, header: { text: 'Vehicle Type' } },
  { name: 'Fuel', fieldName: 'Fuel', width: 100, header: { text: 'Fuel' } }
];

const { gridView: masterGrid, dataProvider: masterProvider } = RealGrid.createGrid('realgrid_master', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    exitGridWhenTab: 'grid'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 10
  }
}, {
  fields
});

const { gridView: detailGrid, dataProvider: detailProvider } = RealGrid.createGrid('realgrid_detail', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    exitGridWhenTab: 'grid'
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 10
  },
  onInitialized: (grid) => {
    fetch('/data/en/pivotDataSet.json')
      .then(response => response.json())
      .then(data => {
        masterProvider.setRows(data);
        detailProvider.setRows(data);
      });
  }
}, {
  fields
});

masterGrid.onTopIndexChanged = function (grid, idx) {
  detailGrid.setTopItem(idx);
};

detailGrid.onTopIndexChanged = function (grid, idx) {
  masterGrid.setTopItem(idx);
};

masterGrid.onLeftPosChanged = function (grid, pos) {
  detailGrid.setLeftPos(pos);
};

detailGrid.onLeftPosChanged = function (grid, pos) {
  masterGrid.setLeftPos(pos);
};

window.masterGrid = masterGrid;
window.masterProvider = masterProvider;
window.detailGrid = detailGrid;
window.detailProvider = detailProvider;
```

When the top row of the grid changes, the onTopIndexChanged event is used, and when horizontal scrolling is performed, the scroll of the grid you want to synchronize is moved to a function inside the onLeftPosChanged event.

```js
masterGrid.onTopIndexChanged = function (grid, idx) {
detailGrid.setTopItem(idx);
}

detailGrid.onTopIndexChanged = function (grid, idx) {
masterGrid.setTopItem(idx);
}

masterGrid.onLeftPosChanged = function (grid, pos) {
detailGrid.setLeftPos(pos); }

detailGrid.onLeftPosChanged = function (grid, pos) {
     masterGrid.setLeftPos(pos);
}
```