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

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.

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.

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.

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.

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
});

Import JSON data Lazy Loading Example