
# Tree Lazy Loading

There is no need to initially load all of the datasets to be displayed in the tree view.
When the user expands a tree row, child rows of that row can be retrieved and added to the tree view.

Mark a tree row as having children even though it currently has no children.
To add children when expanding a row. First, when adding a row, the Has Children setting must be set to true.

The fourth field of setRows() is the name of the field that specifies whether there are children.
A value greater than 0 is considered to mean "there are children," and the imported data displays + even though there is no child data.

The example below shows that only Seoul Metropolitan City has additional data.

```js
const fields = [
  { fieldName: "area1code", dataType: "text" },
  { fieldName: "area1name", dataType: "text" },
  { fieldName: "area2code", dataType: "text" },
  { fieldName: "area2name", dataType: "text" },
  { fieldName: "area3code", dataType: "text" },
  { fieldName: "area3name", dataType: "text" },
  { fieldName: "treeId", dataType: "text" },
  { fieldName: "treeName", dataType: "text" },
  { fieldName: "hasChild", dataType: "text" },
  { fieldName: "iconField", dataType: "text" }
];

const columns = [
  { fieldName: "treeName", name: "treeName", width: 150, header: { text: "Region Name" } },
  { fieldName: "treeId", name: "treeId", header: { text: "TreeID" } },
  { fieldName: "area1code", name: "area1code", header: { text: "Province Code" } },
  { fieldName: "area1name", name: "area1name", header: { text: "Province Name" } },
  { fieldName: "area2code", name: "area2code", header: { text: "City/District Code" } },
  { fieldName: "area2name", name: "area2name", header: { text: "City/District Name" } },
  { fieldName: "area3code", name: "area3code", header: { text: "Town Code" } },
  { fieldName: "area3name", name: "area3name", header: { text: "Town Name" } },
  { fieldName: "iconField", name: "iconField" }
];

const initialData = [
  {
    "treeId": "11",
    "treeName": "Seoul",
    "area1code": "11",
    "area1name": "Seoul",
    "hasChild": 1,
    "iconField": 0
  },
  {
    "treeId": "20",
    "treeName": "Jeju Island",
    "area1code": "22",
    "area1name": "Jeju Island",
    "hasChild": 0,
    "iconField": 8
  }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  treeOptions: {
    iconImagesRoot: "/images/flags/",
    iconImages: [
      "kr.png",
      "de.png",
      "es.png",
      "fr.png",
      "grd_treeicon_leaf.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png"
    ],
    defaultIcon: 4
  },
  onInitialized: (tree) => {
    tree.getDataSource().setRows(initialData, "treeId", true, "hasChild", "iconField");
  }
}, {
  fields
});

treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
  if (dataProvider.getChildCount(rowId) <= 0) {
    var datas = [{
      "treeId": "11.010",
      "treeName": "Jongno-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11010",
      "area2name": "Jongno-gu",
      "iconField": 1
    },
    {
      "treeId": "11.020",
      "treeName": "Jung-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11020",
      "area2name": "Jung-gu",
      "iconField": 2
    },
    {
      "treeId": "11.030",
      "treeName": "Yongsan-gu",
      "area1code": "11",
      "area1name": "Seoul",
      "area2code": "11030",
      "area2name": "Yongsan-gu",
      "iconField": 3
    }];
    
    datas.forEach(function(el) {
      var childId = dataProvider.addChildRow(rowId, el, el.iconField, true);
    });
  }

  return true;
};

window.treeView = treeView;
window.dataProvider = dataProvider;
```

## Data retrieved upon first view

```js
   var data = [
     {
       "treeId": "11",
       "treeName": "Seoul",
       "area1code": "11",
       "area1name": "Seoul",
       "hasChild": 1, // + in front
       "iconField": 0
     },
     {
       "treeId": "20",
       "treeName": "Jeju Island",
       "area1code": "22",
       "area1name": "Jeju Island",
       "hasChild": 0, //no indication in front because it was specified that there is no child data
       "iconField": 8
     }
   ];

   treeProvider.setRows(data, "treeId", true, "hasChild", "iconField")
```

## Get the next data when expanding

```js
   treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
     // If false is returned, it will not be expanded.
     // return false;

     // If the row being expanded has no children, it is a row with hasChildren set.
     // Get the children and add them to that row.
     if (treeProvider.getChildCount(rowId) <= 0) {
       //Get the key value of the row you want to expand, retrieve the children of that row from the db, and then add them using addChildRow().
       //var key = treeProivder.getValue(rowId, "treeId");

       var datas = [{
         "treeId": "11.010",
         "treeName": "Jongno-gu",
         "area1code": "11",
         "area1name": "Seoul",
         "area2code": "11010",
         "area2name": "Jongno-gu",
         "iconField": 1
       },
       {
         "treeId": "11.020",
         "treeName": "Jung-gu",
         "area1code": "11",
         "area1name": "Seoul",
         "area2code": "11020",
         "area2name": "Jung-gu",
         "iconField": 2
       },
       {
         "treeId": "11.030",
         "treeName": "Yongsan-gu",
         "area1code": "11",
         "area1name": "Seoul",
         "area2code": "11030",
         "area2name": "Yongsan-gu",
         "iconField": 3
       } ];
      
       datas.forEach(function(el) {
         var childId = treeProvider.addChildRow(rowId, el, el.iconField, true);
       })
     }

     return true;
   }
```