
# Fill and import data

In [previous step](/tutorial/realgrid-ready-to-fetching), we learned how to create fields and columns in preparation for displaying data in the grid. This time, we will learn how to fill data in a grid or get values from the grid.

## Fill data into grid

When the grid is ready, if you want to display data, just input the data into the DataProvider. There are many ways to put data into a DataProvider, but the most common way is to use the [setRows()](/refs/Class/LocalDataProvider#setrows) function.

### LocalDataProvider.setRows()

Let’s write code to fill in the values using the [setRows()](/refs/Class/LocalDataProvider#setrows) function.

```js
provider.setRows([
   {
     KorName: 'Park Young-ho',
     Gender: ‘Male’,
     Age: '71',
     Phone: '(025)6563-2802',
     ProductId: '198160731-00008',
     KorCountry: 'Mozambique',
     OrderDate: '2021-01-16',
     CardNumber: '5587-2139-9692-3644',
     Monetary: 'EUR',
     StartDate: '2018-02-25',
     EndDate: '2021-08-12',
     ToMonth: '23',
     Month: '41',
     Year: '3',
     InterestRate: '0.15',
     SaveCost: '51000',
     SaveMaturity: '14950650',
     CurrentSave: '9304950',
     Rating: '5',
     BusinessProficiency: '59',
     Address: '45-89 Gonghang-dong, Gangseo-gu, Seoul',
   },
]);
```

#### Grid filled with data using setRows() function

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "70",
      header: {
        text: "이름",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
      Phone: "(025)6563-2802",
      ProductId: "198160731-00008",
      KorCountry: "모잠비크",
      OrderDate: "2021-01-16",
      CardNumber: "5587-2139-9692-3644",
      Monetary: "EUR",
      StartDate: "2018-02-25",
      EndDate: "2021-08-12",
      ToMonth: "23",
      Month: "41",
      Year: "3",
      InterestRate: "0.15",
      SaveCost: "51000",
      SaveMaturity: "14950650",
      CurrentSave: "9304950",
      Rating: "5",
      BusinessProficiency: "59",
      Address: "서울특별시 강서구 공항동 45-89",
    },
  ]);
});
```

Please refer to the guide below for more details on how to populate the grid with data.

- [Fill JSON data](/guides/fill-data/load-json-data)
- [Fill XML data](/guides/fill-data/load-xml-data)
- [Grid Lazy Loading Implementation](/guides/fill-data/lazy-loading)
- [Master Detail Example](/guides/fill-data/master-detail)
- [provider sharing](/guides/fill-data/provider-sharing)

## How to get data from grid

To retrieve grid data, you can use various functions of DataProvider. Let's see how to use the [getRows()](/refs/Class/LocalDataProvider#getrows) function to get the data contained in the DataProvider.

First, let's create a `<pre>` tag element with the id `resultViewer` to display the imported data on the screen.

```html
<pre id="resultViewer"></pre>
```

If you call DataProvider's [getRows()](/refs/Class/LocalDataProvider#getrows) function without arguments, all data in DataProvider will be returned in Array of Array format.

```js
// Get the value of provider with the getRows function
const rows = provider.getRows();
document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "70",
      header: {
        text: "이름",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
      Phone: "(025)6563-2802",
      ProductId: "198160731-00008",
      KorCountry: "모잠비크",
      OrderDate: "2021-01-16",
      CardNumber: "5587-2139-9692-3644",
      Monetary: "EUR",
      StartDate: "2018-02-25",
      EndDate: "2021-08-12",
      ToMonth: "23",
      Month: "41",
      Year: "3",
      InterestRate: "0.15",
      SaveCost: "51000",
      SaveMaturity: "14950650",
      CurrentSave: "9304950",
      Rating: "5",
      BusinessProficiency: "59",
      Address: "서울특별시 강서구 공항동 45-89",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
  ]);

  // getRows 함수로 provider의 값 가져오기
  const rows = provider.getRows();
  document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);
});
```

For more details on how to get the value of DataProvider, please refer to the guide below.

- [Get the value of the grid](/refs/Class/LocalDataProvider#getvalue)

### Get data through GridView

There are various functions available not only in DataProvider but also in GridView to retrieve grid values.

You can also get grid data through GridView's [getValues()](/refs/Class/GridBase#getvalues) function.

```js
// Get the value of provider with the getRows function
const rows = provider.getValues(1);
document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "70",
      header: {
        text: "이름",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
      Phone: "(025)6563-2802",
      ProductId: "198160731-00008",
      KorCountry: "모잠비크",
      OrderDate: "2021-01-16",
      CardNumber: "5587-2139-9692-3644",
      Monetary: "EUR",
      StartDate: "2018-02-25",
      EndDate: "2021-08-12",
      ToMonth: "23",
      Month: "41",
      Year: "3",
      InterestRate: "0.15",
      SaveCost: "51000",
      SaveMaturity: "14950650",
      CurrentSave: "9304950",
      Rating: "5",
      BusinessProficiency: "59",
      Address: "서울특별시 강서구 공항동 45-89",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
  ]);

  // getRows 함수로 provider의 값 가져오기
  const rows = gridView.getValues(1);
  document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);
});
```

## Understanding RowId and ItemIndex

DataProvider's `getRows(startRow: number, endRow: number)` and GridView's `getValues(itemIndex: number)` functions are both functions for retrieving data from the grid. However, the meaning of the number type argument passed to the two functions is slightly different.

To understand `RowId` of DataProvider and `ItemIndex` of GridView, which are number type properties that mean rows.

- From previous versions of RealGrid Help:
   - [Understanding multi-row data and RowId](http://help.realgrid.com/tutorial/a9/)
   - [Understanding ItemModel and ItemIndex](http://help.realgrid.com/tutorial/a10/)
- From the RealGrid2 guide
   - [Item Model](/guides/row-group/item-model-api)

Please refer to the section.

In this step, we learned about functions for filling data into the grid and retrieving the filled data. In [Next Step, Grid Controlling](/tutorial/realgrid-controlling), we will learn about ways to manipulate a grid filled with data.