Fill and import data

In previous step, 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() function.

LocalDataProvider.setRows()

Let’s write code to fill in the values using the setRows() function.

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

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

• Fill JSON data
• Fill XML data
• Grid Lazy Loading Implementation
• Master Detail Example
• 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() 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.

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

If you call DataProvider's getRows() function without arguments, all data in DataProvider will be returned in Array of Array format.

// Get the value of provider with the getRows function
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

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() function.

// Get the value of provider with the getRows function
const rows = provider.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 (opens in a new tab)
  • Understanding ItemModel and ItemIndex (opens in a new tab)
• From the RealGrid2 guide
  • Item Model

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, we will learn about ways to manipulate a grid filled with data.