
# Insert values into grid

You can directly change or add cells, rows, or multiple rows at the same time to the DataProvider to respond to screen configuration or special needs.

> 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.

If you're editing row data, see the demo below. [Edit row data](/guides/crud/update)
> For events that occur during editing, check [Event occurrence order](/guides/events/event-order).

#### Functions for entering grid values

This is a function to input the value of `dataProvider`.

- [setValue(dataRow, fieldName, value)](/refs/Class/LocalDataProvider#setvalue)

This is a function to enter the value of `gridView`.

- [setValue(itemIndex, fieldName, value)](/refs/Class/GridBase#setvalue)

#### Putting values into grid

You can change the value of a data cell (one field in a row).
The grid below is sorted by name.
Press setValue of dataProvider and gridView to see the difference.

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: "120",
    header: {
      text: "Name"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "120",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "120",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "120",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "120",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "120",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "120",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "120",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "120",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "120",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "120",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "120",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "120",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    },
    footer: {
      text: "Total =>"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    },
    footer: {
      text: "Total",
      expression: "sum",
      groupExpression: "sum"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "120",
    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.orderBy(['KorName']);
      });
  }
}, {
  fields
});

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

function DPsetValue() {
  var current = gridView.getCurrent();
  var dataRow = current.dataRow;
  var fieldName = current.fieldName;
  var value = "Cell (" + fieldName + ", " + dataRow + ")";
  dataProvider.setValue(dataRow, fieldName, value);
}

function GVsetValue() {
  var current = gridView.getCurrent();
  var itemIndex = current.itemIndex;
  var fieldName = current.fieldName;
  var value = "Cell (" + fieldName + ", " + itemIndex + ")";
  gridView.setValue(itemIndex, fieldName, value);
}
```

#### dataProvider.setValue()

```js
var current = gridView.getCurrent();
var dataRow = current.dataRow;
var fieldName = current.fieldName;

var value = "Cell (" + fieldName + ", " + dataRow + ")";
dataProvider.setValue(dataRow, fieldName, value);
```

#### gridView.setValue()

```js
var current = gridView.getCurrent();
var itemIndex = current.itemIndex;
var fieldName = current.fieldName;

var value = "Cell (" + fieldName + ", " + itemIndex + ")";
gridView.setValue(itemIndex, fieldName, value);
```

#### caution

If the grid is being edited at the time of calling the DataProvider's data function, an error `"Clinet is editing"` will occur.
User editing and DataProvider function calls cannot proceed simultaneously.
You must first complete user editing by calling [gridView.commit()](/refs/Interface/RendererEditResult#commit) and [gridView.cancel()](/refs/Class/GridBase#cancel) before calling the dataProvider. You need to call a function.