SMART datagrid v.1 > Examples

Load Tree Data  Example

no-lite

If use TreeDataLoader.load, you can load the source data of different formats imported from the server to TreeDataSet. 

    new TreeDataLoader(dataSet).load('csv', data, {
        start: 1,
        quoted: true,
        ...
    });

First, load method specifies the data format. Currently, it supports 'csv', 'json', 'xml'. data is a source data, and it can be a string or JSON object or XML document object depending on the format specified in the first parameter. 

New rows will be created after removing all of the existing data rows, and onRowCountChanged event will be fired after the loading is completed. 

1. CSV data

As in the format below, it gets the stored CSV file from the server and configures Tree Data Set. Since the field names are set in the first row, start of the load option will be 1. Also, quoted will be specified as true since the fields with the quoted values already exist, and currency will be specified as true since the text rather than the number is contained in the value of NUMBER field. Please refer to TreeDataLoader.load topic about more details on the values that can be specified in the option. 

treeField and useTreeField are the important options, and treeField is 1 since the tree information is contained in the second field and useTreeField is false so that these field values will not be saved in the data set. Please refer to load topic about more details. 

Icon,Tree,Loan Number,Country,Interest Rate,Currency of Commitment,Project ID,Original Principal Amount,Cancelled Amount,Disbursed Amount,Repaid to IBRD,Sold 3rd Party,First Repayment Date,Last Repayment Date
0,1,IBRD00010,France,4.25,USD,P037383,"$250,000,000.00 ",$0.00 ,"$250,000,000.00 ","$38,000.00 ","$249,962,000.00 ",11/01/1952,05/01/1977
0,1.1,IBRD00020,Netherlands,4.25,USD,P037452,"$191,044,211.75 ",$0.00 ,"$191,044,211.75 ","$103,372,211.75 ","$87,672,000.00 ",04/01/1952,10/01/1972
0,1.2,IBRD00021,Netherlands,4.25,USD,P037452,"$3,955,788.25 ",$0.00 ,"$3,955,788.25 ",$0.00 ,"$3,955,788.25 ",04/01/1953,04/01/1954
0,1.2.1,IBRD00030,Denmark,4.25,USD,P037362,"$40,000,000.00 ",$0.00 ,"$40,000,000.00 ","$17,771,000.00 ","$22,229,000.00 ",02/01/1953,08/01/1972

Read the text file saved as CSV format. 

2. JSON data

In order to load JSON array as below to the data set, you should specify the type as "json" first and specify rows and childRows options. rows specify which objects should be imported to the top row, and childRows specify which property contains the array of the child row after that. In this example, rows will be specified as an empty string so that the top item of the array can be created as the top rows of the data set, and childRows will be specified as "rows" so that json array specified by "rows" property can be imported to child rows. 

Please refer to TreeDataLoader.load topic about more details of the properties. 

[
  {
    "icon": "0",
    "loan_number": "IBRD00010",
    "country": "France",
    "first_date": "11/01/1952",
    "last_date": "05/01/1977",
    "rows": [
      {
        "icon": "0",
        "loan_number": "IBRD00020",
      },
      {
        "icon": "0",
        "loan_number": "IBRD00021",
        "country": "Netherlands",
        "rows": [
          {
            "icon": "0",
            "loan_number": "IBRD00030",
            "country": "Denmark",
          },
          {
            "icon": "0",
            "loan_number": "IBRD00040",
          }
        ]
      },
      {
        "icon": "0",
        "loan_number": "IBRD00050",
      }
    ]
  },
  {
    "icon": "1",
    "loan_number": "IBRD00060",
    "country": "Chile",

Read the text file saved as JSON format. 

3. XML data

In order to load the data transferred as an XML text file to the tree data set as below, you should specify the type as "xml" first and specify rows and childRows options. The property name is the same as the case of JSON, but the instruction is different. 

The rows are the tag name of the XML elements to be imported to the data row. In the example below, it is row. The childRows are the tag name of the element which contains the elements to import the child rows. In the example, it is rows. This property may not be specified when the top element containing child elements does not exist, and the elements specified by rows are contained in it right below. 

Please refer to TreeDataLoader.load topic about more details of the properties. 

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <row>
        <icon>0</icon>
        <loan_number>IBRD00010</loan_number>
        <country>France</country>
        <first_date>11/01/1952</first_date>
        <last_date>05/01/1977</last_date>
        <rows>
            <row>
                <icon>0</icon>
                <loan_number>IBRD00020</loan_number>
            </row>
            <row>
                <icon>0</icon>
                <rows>
                    <row>
                        <icon>0</icon>
                        <loan_number>IBRD00030</loan_number>
                    </row>
                    <row>
                        <icon>0</icon>
                        <loan_number>IBRD00040</loan_number>
                    </row>
                </rows>
            </row>
            <row>
                <icon>0</icon>
                <loan_number>IBRD00050</loan_number>
            </row>
        </rows>
    </row>
    <row>
        <icon>1</icon>
        <loan_number>IBRD00060</loan_number>
        <rows>
            <row>
                <icon>1</icon>
                <loan_number>IBRD00070</loan_number>
                <repaid_amount>$0.00</repaid_amount>

Read the text file saved as XML format. 

View Source JSP 

See Also

TreeDataLoader.load

TreeDataSet

TreeView

Tree Overview

Examples

Tree Data Set

Hello Tree