
# Provider Share

Since RealGrid has an independent structure of View-Model and Data, multiple different GridViews can be displayed by connecting to one DataProvider.

#### 1 DataProvider - 2 GridView

To connect GridView and DataProvider, use the [GridBase.setDataSource()](/refs/Class/GridBase#setdatasource) function.


```js
// The variable of the first grid is gridView
gridView.setDataSource(dataProvider);
```

Let's attach the same DataProvider to the right grid as well.


```js
// The variable of the second grid is gridView2
gridView2.setDataSource(dataProvider);
```

#### Change data

If you change the value of one DataProvider connected to multiple grids, the changed value will be displayed in all connected grids.

```js
const fields = [
  { fieldName: "continent", dataType: "text" },
  { fieldName: "country", dataType: "text" },
  { fieldName: "2000", dataType: "number" },
  { fieldName: "2001", dataType: "number" },
  { fieldName: "2002", dataType: "number" },
  { fieldName: "2003", dataType: "number" },
  { fieldName: "2004", dataType: "number" },
  { fieldName: "2005", dataType: "number" },
  { fieldName: "2006", dataType: "number" },
  { fieldName: "2007", dataType: "number" },
  { fieldName: "2008", dataType: "number" },
  { fieldName: "2009", dataType: "number" },
  { fieldName: "2010", dataType: "number" }
];

const columns1 = [
  { name: "continent", fieldName: "continent", width: 80, header: { text: "Continent" } },
  { name: "country", fieldName: "country", width: 80, header: { text: "Country" } },
  { name: "colSeries1", type: "series", fieldNames: "2000..2010", renderer: { type: "sparkline" }, width: 170, header: { text: "Spark Line", styleName: "orange-column" } },
  { name: "colSeries2", type: "series", fieldNames: "2000..2010", renderer: { type: "sparkcolumn" }, width: 170, header: { text: "Spark Column", styleName: "orange-column" } },
  { name: "colSeries3", type: "series", fieldNames: "2000..2010", renderer: { type: "sparkwinloss", baseValue: 10, belowHeight: 0.4 }, width: 170, header: { text: "Spark Winloss", styleName: "orange-column" } }
];

const columns2 = [
  { name: "continent", fieldName: "continent", width: 80, header: { text: "Continent" } },
  { name: "country", fieldName: "country", width: 80, header: { text: "Country" } },
  { fieldName: "2000", width: 50, header: { text: "2000" } },
  { fieldName: "2001", width: 50, header: { text: "2001" } },
  { fieldName: "2002", width: 50, header: { text: "2002" } },
  { fieldName: "2003", width: 50, header: { text: "2003" } },
  { fieldName: "2004", width: 50, header: { text: "2004" } },
  { fieldName: "2005", width: 50, header: { text: "2005" } },
  { fieldName: "2006", width: 50, header: { text: "2006" } },
  { fieldName: "2007", width: 50, header: { text: "2007" } },
  { fieldName: "2008", width: 50, header: { text: "2008" } },
  { fieldName: "2009", width: 50, header: { text: "2009" } },
  { fieldName: "2010", width: 50, header: { text: "2010" } }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid_master", {
  columns: columns1,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: "No data to display." },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { width: 16 },
  onTopIndexChanged: function (grid, topIndex) {
    gridView2.setTopItem(topIndex);
  },
  onCurrentChanged: function (grid, index) {
    const newIndex = {};
    const column = (index.column === "continent" || index.column === "country") ? index.column : undefined;
    if (index.itemIndex >= 0) {
      newIndex.itemIndex = index.itemIndex;
    }
    column && (newIndex.column = column);
    gridView2.setCurrent(newIndex);
  },
  onSortingChanged: function (grid) {
    const preEvent = gridView.onSortingChanged;
    gridView.onSortingChanged = gridView2.onSortingChanged = null;

    const sortInfos = grid.getSortedFields();
    const fields = [];
    const dirs = [];
    if (sortInfos) {
      for (let i = 0; i < sortInfos.length; i++) {
        fields.push(sortInfos[i].orgFieldName);
        dirs.push(sortInfos[i].direction);
      }
    }
    gridView2.orderBy(fields, dirs);

    gridView.onSortingChanged = gridView2.onSortingChanged = preEvent;
  }
}, {
  fields: fields
});

const { gridView: gridView2 } = RealGrid.createGrid("realgrid_detail", {
  dataProvider: dataProvider,
  columns: columns2,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: "No data to display." },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { width: 16 },
  onTopIndexChanged: function (grid, topIndex) {
    gridView.setTopItem(topIndex);
  },
  onCurrentChanged: function (grid, index) {
    const newIndex = {};
    const column = (index.column === "continent" || index.column === "country") ? index.column : undefined;
    if (index.itemIndex >= 0) {
      newIndex.itemIndex = index.itemIndex;
    }
    column && (newIndex.column = column);
    gridView.setCurrent(newIndex);
  },
  onSortingChanged: function (grid) {
    const preEvent = gridView2.onSortingChanged;
    gridView.onSortingChanged = gridView2.onSortingChanged = null;

    const sortInfos = grid.getSortedFields();
    const fields = [];
    const dirs = [];
    if (sortInfos) {
      for (let i = 0; i < sortInfos.length; i++) {
        fields.push(sortInfos[i].orgFieldName);
        dirs.push(sortInfos[i].direction);
      }
    }
    gridView.orderBy(fields, dirs);

    gridView.onSortingChanged = gridView2.onSortingChanged = preEvent;
  }
}, {
  fields: fields,
  dataProvider: dataProvider
});

fetch('/data/en/series_data.json')
  .then(response => response.json())
  .then(data => {
    dataProvider.setRows(data);
    gridView.resetCurrent();
    gridView.refresh();
  });

window.gridView = gridView;
window.gridView2 = gridView2;
window.dataProvider = dataProvider;

function setValues() {
  dataProvider.setValue(0, "2000", 1);
  dataProvider.setValue(0, "2001", 3);
  dataProvider.setValue(0, "2002", 5);
  dataProvider.setValue(0, "2003", 7);
  dataProvider.setValue(0, "2004", 9);
  dataProvider.setValue(0, "2005", 10);
  dataProvider.setValue(0, "2006", 12);
  dataProvider.setValue(0, "2007", 15);
  dataProvider.setValue(0, "2008", 17);
  dataProvider.setValue(0, "2009", 19);
  dataProvider.setValue(0, "2010", 20);
}

window.setValues = setValues;
```

```js
dataProvider.setValue(0,"2000", 1);
dataProvider.setValue(0,"2001", 3);
dataProvider.setValue(0,"2002", 5);
dataProvider.setValue(0,"2003", 7);
dataProvider.setValue(0,"2004", 9);
dataProvider.setValue(0,"2005", 10);
dataProvider.setValue(0,"2006", 12);
dataProvider.setValue(0,"2007", 15);
dataProvider.setValue(0,"2008", 17);
dataProvider.setValue(0,"2009", 19);
dataProvider.setValue(0,"2010", 20);
```