
# Get the value of the grid

You can get the values of data cells and rows through several functions of GridView and DataProvider.  
If the grid is not being edited, it returns the same value by default.

Unless there are special cases, the value is retrieved from dataProvider and used.

> The index used by dataProvider is dataRow, and the index used by GridView is itemIndex.
> There is no difference between these two indexes when initially loading data, but differences occur during sorting, filtering, and grouping.
> dataRow does not change if there are no row insertions or deletions since the data was first loaded. (When sorting, there may be differences from the order shown on the screen)
> itemIndex is the order visible to the user.
 
#### Get value from dataProvider

You can get the `value` value corresponding to the `dataRow` and `field` values of the current focus position.  
Check how date data is returned in getJsonRow() and getOutputRow().

* [getValue(dataRow, field)](/refs/Class/LocalDataProvider#getvalue)
* [getValues(dataRow)](/refs/Class/DataProviderBase#getvalues)
* [getJsonRow(dataRow)](/refs/Class/DataProviderBase#getjsonrow)
* [getOutputRow(options, dataRow)](/refs/Class/LocalDataProvider#getoutputrow)
* [getRows(startRow, endRow)](/refs/Class/LocalDataProvider#getrows)
* [getJsonRows(startRow, endRow)](/refs/Class/LocalDataProvider#getjsonrows)
* [getOutputRows(options, startRow, endRow)](/refs/Class/LocalDataProvider#getoutputrows)
* [getFieldValues(field, startRow, endRow)](/refs/Class/LocalDataProvider#getfieldvalues)

The grid below is sorted by name.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    },
    footer: {
      text: "Total =>"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    },
    footer: {
      text: "Total",
      expression: "sum",
      groupExpression: "sum"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.refresh();
        grid.orderBy(['KorName']);
        grid.setFocus();
      });
  }
}, {
  fields
});

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

function getValue() {
  var current = gridView.getCurrent();
  var value = dataProvider.getValue(current.dataRow, current.fieldName);
  alert(
    "dataRow: " +
      current.dataRow +
      "\n" +
      "field: " +
      current.fieldName +
      "\n" +
      "value: " +
      value
  );
}

function getValues() {
  var current = gridView.getCurrent();
  alert(
    "dataRow: " + current.dataRow + "\n" + dataProvider.getValues(current.dataRow)
  );
}

function getJsonRow() {
  var current = gridView.getCurrent();
  var jsonData = dataProvider.getJsonRow(current.dataRow);
  alert("dataRow: " + current.dataRow + "\n" + JSON.stringify(jsonData));
}

function getOutputRow() {
  var options = { datetimeFormat: "yyyy-MM-dd" };
  var current = gridView.getCurrent();
  var outputRowData = dataProvider.getOutputRow(options, current.dataRow);
  alert("dataRow: " + current.dataRow + "\n" + JSON.stringify(outputRowData))
}

function getRows() {
  alert(dataProvider.getRows(0, -1));
}

function getJsonRows() {
  alert(JSON.stringify(dataProvider.getJsonRows(0, -1)));
}

function getFieldValues() {
  var current = gridView.getCurrent();
  alert(
    "field: " +
      current.fieldName +
      "\n" +
      "fieldValues: " +
      dataProvider.getFieldValues(current.fieldName, 0, -1)
  );
}

function getOutputRows() {
  var options = { datetimeFormat: "yyyy-MM-dd" };
  alert(JSON.stringify(dataProvider.getOutputRows(options, 0, -1)))
}
```

#### getValue

```js
var current = gridView.getCurrent();
var value = dataProvider.getValue(current.dataRow, current.fieldName);
alert("dataRow: " + current.dataRow + ", " + "field: " + current.fieldName + ", " + "value: " + value);
```

#### getValues

It can be imported as an `Array` containing field values of one row in order.

```js
var current = gridView.getCurrent();
alert("dataRow: " + current.dataRow + ", " + dataProvider.getValues(current.dataRow));
```

#### getJsonRow

You can retrieve the value of one row as a `Json object`.

```js
var current = gridView.getCurrent();
var jsonData = dataProvider.getJsonRow(current.dataRow);
alert("dataRow: " + current.dataRow + ", " + JSON.stringify(JsonData));
```

#### getOutputRow

You can get one row of values matching the set options as `Object`.  
`options` sets the method of returning data.

```js
var options = { datetimeFormat: "yyyy-MM-dd" };
var current = gridView.getCurrent();
var outputRowData = dataProvider.getOutputRow(options, current.dataRow);
alert("dataRow: " + current.dataRow + ", " + JSON.stringify(outputRowData))
```

#### getRows

You can import data from multiple rows as an `Array of Array`.  
`startRow` defaults to 0, and if it is less than 0, the first row is fetched.  
`endRow` defaults to -1, with -1 fetches up to the last row.

```js
alert(dataProvider.getRows(0, -1));
```

#### getJsonRows

You can import data from multiple rows as an `Array of Json objects`.  
`startRow` defaults to 0, and if it is less than 0, the first row is fetched.  
`endRow` defaults to -1, with -1 fetches up to the last row.

```js
alert(JSON.stringify(dataProvider.getJsonRows(0, -1)));
```

#### getOutputRows

You can import multiple rows of data matching the set options as `Object`.  
`options` sets the method of returning data.  
`startRow` defaults to 0, and if it is less than 0, the first row is fetched.  
`endRow` defaults to -1, with -1 fetches up to the last row.  

```js
var options = { datetimeFormat: "yyyy-MM-dd" };
alert(JSON.stringify(dataProvider.getOutputRows(options, 0, -1)))
```

#### getFieldValues

The values of one field at the current focus position can be imported into an `Array` up to the specified row range.

```js
var current = gridView.getCurrent();
alert("field: " + current.fieldName + ", " + "fieldValues: " + dataProvider.getFieldValues(current.fieldName, 0, -1));
```

#### Get value from GridView

You can get the `value` value corresponding to the `itemIndex` and `field` value of the current focus position.
Check how date and numeric data are returned in getValues(), getDisplayValues(), and getDisplayValuesOfRow().

* [getValue(itemIndex, field)](/refs/Class/GridBase#getvalue)
* [getValues(itemIndex)](/refs/Class/GridBase#getvalues)
* [getJsonRows()](/refs/Class/GridBase#geteditvalue)
* [getDisplayValues(itemIndex,useColumnName)](/refs/Class/GridBase#getdisplayvalues)
* [getDisplayValuesOfRow(dataRow,useColumnName)](/refs/Class/GridBase#getdisplayvaluesofrow)

The grid below is sorted by name.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    },
    footer: {
      text: "Total =>"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    },
    footer: {
      text: "Total",
      expression: "sum",
      groupExpression: "sum"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.refresh();
        grid.orderBy(['KorName']);
        grid.setFocus();
      });
  }
}, {
  fields
});

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

function getValue() {
  var current = gridView.getCurrent();
  var value = gridView.getValue(current.itemIndex, current.fieldName);
  alert(
    "itemIndex: " +
      current.itemIndex +
      "\n" +
      "field: " +
      current.fieldName +
      "\n" +
      "value: " +
      value
  );
}

function getValues() {
  var current = gridView.getCurrent();
  alert(
    "itemIndex: " + current.itemIndex + "\n" + JSON.stringify(gridView.getValues(current.itemIndex))
  );
}

function getJsonRows() {
  alert(JSON.stringify(gridView.getJsonRows()));
}

function getDisplayValues() {
  var current = gridView.getCurrent();
  var jsonData = gridView.getDisplayValues(current.itemIndex);
  alert("itemIndex: " + current.itemIndex + "\n" + JSON.stringify(jsonData));
}

function getDisplayValuesOfRow() {
  var current = gridView.getCurrent();
  var jsonData = gridView.getDisplayValuesOfRow(current.dataRow);
  alert("dataRow: " + current.dataRow + "\n" + JSON.stringify(jsonData));
}
```

#### getValue

```js
   var current = gridView.getCurrent();
   var value = gridView.getValue(current.itemIndex, current.fieldName);
   alert(
     "itemIndex: " +
       current.itemIndex +
       ", " +
       "field: " +
       current.fieldName +
       ", " +
       "value: " +
       value
   );
```

#### getValues

```js
   var current = gridView.getCurrent();
   alert(
     "itemIndex: " + current.itemIndex + ", " + JSON.stringify(gridView.getValues(current.itemIndex))
   );
```

#### getJsonRows

```js
   alert(JSON.stringify(gridView.getJsonRows()));
```

#### getDisplayValues

The value displayed on the screen, not the actual value, is retrieved as is using itemIndex.

```js
   var current = gridView.getCurrent();
   var jsonData = gridView.getDisplayValues(current.itemIndex);
   alert("itemIndex: " + current.itemIndex + ", " + JSON.stringify(jsonData));
```

#### getDisplayValuesOfRow

The value displayed on the screen, not the actual value, is retrieved as is using dataRow.

```js
   var current = gridView.getCurrent();
   var jsonData = gridView.getDisplayValuesOfRow(current.dataRow);
   alert("dataRow: " + current.dataRow + ", " + JSON.stringify(jsonData));
```