RealGrid2 Guide
Get data
Import JSON data

Import JSON data

RealGrid can read data in JSON format using the LocalDataProvider.fillJsonData() function.

JSON data

Data of JSON formats that can be entered into RealGrid's DataProvider has the same structure as array type data.

  1. A structure that is a list of pure values, that is, an array of a value
  2. Name: Arrangement of structures in a collection of properties consisting of values pairs

You can see that the above two types of data formats can be loaded into GridView using the LocalDataProvider.setRows() function in the left menu Array data import.

The data in the JSON format can be used to read the data more flexibly using the Localdataprovider.filljsondata () function. The arguments of the function include OPTIONS, which are data and dataFilloptions objects.

For options, check out the demo in the DataFilloptions area below.

name: array of value set structures

var data = [
   {
     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, Airport-dong, Gangseo-gu, Seoul"
   },
   {
     KorName: "Cho Il-hyung",
     Gender: "M",
     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"
   }
];
 
dataProvider.fillJsonData(data, { fillMode: "set" });

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 = [
   {
     KorName: "Park Young-ho",
     Gender: "M",
     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"
   },
   {
     KorName: "Cho 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"
   }
];
 
dataProvider.fillJsonData(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 = [
   {
     KorName: "Kim Deok-jung",
     Gender: “Female”,
     Age: "53",
     Phone: "(064)5483-6874",
     ProductId: "149115669-00009",
     KorCountry: "Canada",
     OrderDate: "2020-03-08",
     CardNumber: "5121-9931-3555-9853",
     Monetary: "HKD",
     StartDate: "2018-12-30",
     EndDate: "2022-01-16",
     ToMonth: "13",
     Month: "36",
     Year: "3",
     InterestRate: "0.32",
     SaveCost: "112000",
     SaveMaturity: "50480640",
     CurrentSave: "20805120",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "115-15, Sinwol-dong, Yangcheon-gu, Seoul"
   },
   {
     KorName: "Kook Young-seok",
     Gender: “Male”,
     Age: "63",
     Phone: "(044)7055-3032",
     ProductID: "738027655-00005",
     KORCOUNTRY: "Buffe Island",
     OrderDate: "2020-05-01",
     Cardnumber: "5571-3720-2975-7540",
     Monetary: “AUD”,
     StartDate: "2019-08-15",
     EndDate: "2021-12-23",
     ToMonth: "5",
     Month: "28",
     Year: "2",
     InterestRate: "0.2",
     SaveCost: "84000",
     Savematury: "15523200",
     CurrentSave: "4704000",
     Rating: "3",
     BusinessSproficiency: "14",
    
   }
];
 
 
var data = [
   {
     KorName: "Kim Deok-jung",
     Gender: “Female”,
     Age: "53",
     Phone: "(064)5483-6874",
     ProductID: "149115669-00009",
     KorCountry: "Canada",
     OrderDate: "2020-03-08",
     Cardnumber: "5121-9931-3555-9853",
     Monetary: "HKD",
     StartDate: "2018-12-30",
     EndDate: "2022-01-16",
     ToMonth: "13",
     Month: "36",
     Year: "3",
     InterestRate: "0.32",
     SaveCost: "112000",
     SaveMaturity: "50480640",
     CurrentSave: "20805120",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "115-15, Sinwol-dong, Yangcheon-gu, Seoul"
   },
   {
     KorName: "Kook Young-seok",
     Gender: “Male”,
     Age: "63",
     Phone: "(044)7055-3032",
     ProductId: "738027655-00005",
     KorCountry: "Bouvet Island",
     OrderDate: "2020-05-01",
     CardNumber: "5571-3720-2975-7540",
     Monetary: “AUD”,
     StartDate: "2019-08-15",
     EndDate: "2021-12-23",
     ToMonth: "5",
     Month: "28",
     Year: "2",
     InterestRate: "0.2",
     SaveCost: "84000",
     SaveMaturity: "15523200",
     CurrentSave: "4704000",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
   }
];
 
dataProvider.fillJsonData(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 = [
   {
     KorName: "Jeonwoosu",
     Gender: “Female”,
     Age: "73",
     Phone: "(051)2259-4592",
     ProductId: "969966274-00009",
     KorCountry: "Peru",
     OrderDate: "2019-12-27",
     CardNumber: "5255-8067-8768-5495",
     Monetary: “THB”,
     StartDate: "2018-04-11",
     EndDate: "2022-08-22",
     ToMonth: "22",
     Month: "52",
     Year: "4",
     InterestRate: "0.4",
     SaveCost: "40000",
     SaveMaturity: "45344000",
     CurrentSave: "20384000",
     Rating: "3",
     BusinessProficiency: "100",
     Address: "600 Garak-dong, Songpa-gu, Seoul"
   },
   {
     KorName: "Lee Jun-won",
     Gender: “Male”,
     Age: "25",
     Phone: "(086)7381-3123",
     ProductId: "299037986-00005",
     KorCountry: "East Timor",
     OrderDate: "2019-06-14",
     CardNumber: "5182-7600-2022-5395",
     Monetary: “AUD”,
     StartDate: "2018-06-02",
     EndDate: "2022-02-13",
     ToMonth: "20",
     Month: "44",
     Year: "3",
     InterestRate: "0.1",
     SaveCost: "152000",
     SaveMaturity: "36115200",
     CurrentSave: "20064000",
     Rating: "3",
     BusinessProficiency: "53",
     Address: "937 Daechi-dong, Gangnam-gu, Seoul"
   },
   {
     KorName: "Ahn Byeong-eun",
     Gender: “Male”,
     Age: "46",
     Phone: "(018)2861-7855",
     ProductId: "048679773-00001",
     KorCountry: "Fiji",
     OrderDate: "2020-11-01",
     CardNumber: "5172-0915-3934-2048",
     Monetary: "VND",
     StartDate: "2019-05-30",
     EndDate: "2021-06-09",
     ToMonth: "8",
     Month: "24",
     Year: "2",
     InterestRate: "0.39",
     SaveCost: "170000",
     SaveMaturity: "42268800",
     CurrentSave: "16809600",
     Rating: "4",
     BusinessProficiency: "81",
     Address: "240-1 Galhyeon-dong, Eunpyeong-gu, Seoul"
   }
];
 
dataProvider.fillJsonData(data, {
   fillMode: "update", start: 1, count: 2, fillPos: 1
});
grid dynamic heightImport XML data