
# Import XML data

RealGrid can read data in XML format using the LocalDataProvider.fillXmlData() function.

#### XML data

You can input data in XML format into RealGrid's DataProvider. The type of XML data can be either using an attribute or a childNode as shown below, and a combination of the two methods can also be used.

See data samples for each type below.

Data in XML format can be read using a function called LocalDataProvider.fillXmlData().

#### XML data that maps attributes to fields

```js
var data = '<rows>\
     <row 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"/>\
     <row KorName= "Jo Il-hyung" Gender= "Male" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "Canada" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= " 0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "122 Bongrae-dong 2-ga, Jung-gu, Seoul" />\
   </rows>';

   dataProvider.fillXmlData(data);
```

#### DataFillOptions

There are three functions for loading data into the grid.

- fillJsonData(data, options)
- fillXmlData(data, options)
- fillCsvData(data, options)

These functions commonly define a second argument called options of type DataFillOptions.

You can use DataFillOptions to set various options for loading data into the grid.

You can choose how to fill data with the fillMode property.

Clear all data in the grid and fill in the data below.

```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" }, styleName: "right-column" },
  { 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: "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: "Installment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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 }
}, {
  fields
});

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

function fillXmlData() {
  const xmlData = '<rows>\
    <row 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"/>\
    <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
  </rows>';

  dataProvider.fillXmlData(xmlData, { fillMode: "set" });
}

window.fillXmlData = fillXmlData;
```

```js
var data = '<rows>\
     <row 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"/>\
     <row KorName= "Jo Il-hyung" Gender= "Male" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "Canada" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= " 0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "122 Bongrae-dong 2-ga, Jung-gu, Seoul" />\
   </rows>';

   dataProvider.fillXmlData(data, { fillMode: "set" });
```

Append the first row of jsonData after the last row of the grid. To do this, use the start: 0, count: 1 properties of DataFillOptions.

```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" }, styleName: "right-column" },
  { 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: "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: "Installment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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) => {
    const xmlData = '<rows>\
      <row 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"/>\
      <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
    </rows>';

    grid.getDataSource().fillXmlData(xmlData, { fillMode: "set" });
  }
}, {
  fields
});

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

function appendData() {
  const xmlData = '<rows>\
    <row 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"/>\
    <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
  </rows>';

  dataProvider.fillXmlData(xmlData, { fillMode: "append", start: 0, count: 1 });
}

window.appendData = appendData;
```

```js
var data = '<rows>\
     <row 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"/>\
     <row KorName= "Jo Il-hyung" Gender= "Male" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "Canada" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= " 0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "122 Bongrae-dong 2-ga, Jung-gu, Seoul" />\
   </rows>';

dataProvider.fillXmlData(data, { fillMode: "append", start: 0, count: 1 });
```

Among the newly imported data, one data is imported from the second data and inserted into the first position. To do this, we use the start: 1, count: 1, fillPos: 0 properties of DataFillOptions.

```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" }, styleName: "right-column" },
  { 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: "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: "Installment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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) => {
    const xmlData = '<rows>\
      <row 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"/>\
      <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
    </rows>';

    grid.getDataSource().fillXmlData(xmlData, { fillMode: "set" });
  }
}, {
  fields
});

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

function insertData() {
  const xmlData = '<rows>\
    <row 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"/>\
    <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
  </rows>';

  dataProvider.fillXmlData(xmlData, {
    fillMode: "insert",
    start: 1,
    count: 1,
    fillPos: 0
  });
}

window.insertData = insertData;
```

```js
var data = '<rows>\
     <row 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"/>\
     <row KorName= "Jo Il-hyung" Gender= "Male" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "Canada" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= " 0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "122 Bongrae-dong 2-ga, Jung-gu, Seoul" />\
   </rows>';

dataProvider.fillXmlData(data, {
   fillMode: "insert",
   start: 1,
   count: 1,
   fillPos: 0
});
```

Among the newly imported data, two data are imported starting from the second data and overwritten (updated) starting from the second data of the current grid. To do this, we use the start: 1, count: 2, fillPos: 0 properties of DataFillOptions.

```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" }, styleName: "right-column" },
  { 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: "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: "Installment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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) => {
    const xmlData = '<rows>\
      <row 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"/>\
      <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
    </rows>';
    
    grid.getDataSource().fillXmlData(xmlData, { fillMode: "set" });
  }
}, {
  fields
});

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

function updateData() {
  const xmlData = '<rows>\
    <row 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"/>\
    <row KorName= "조일형" Gender= "남" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "캐나다" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= "0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "서울특별시 중구 봉래동2가 122" />\
  </rows>';

  dataProvider.fillXmlData(xmlData, { 
    fillMode: "update",
    start: 1,
    count: 1,
    fillPos: 0 
  });
}

window.updateData = updateData;
```

```js
var data = '<rows>\
     <row 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"/>\
     <row KorName= "Jo Il-hyung" Gender= "Male" Age= "62" Phone= "(093)8809-8696" ProductId= "571215854-00001" KorCountry= "Canada" OrderDate= "2019-07-29" CardNumber= "5348-5093-3750-0623" Monetary= "USD" StartDate= "2019-10-21" EndDate= "2022-12-11" ToMonth= "3" Month= "37" Year= "3" InterestRate= " 0.38" SaveCost= "14000" SaveMaturity= "7801080" CurrentSave= "1108520" Rating= "3" BusinessProficiency= "53" Address= "122 Bongrae-dong 2-ga, Jung-gu, Seoul" />\
   </rows>';

dataProvider.fillXmlData(data, {
   fillMode: "update", start: 1, count: 2, fillPos: 1
});
```