
# tree icon

By specifying an icon for each tree node, you can display various icons on the nodes.
To use a tree icon, set treeOptions.iconImagesRoot and iconImages in advance.
For nodes where iconIndex is not specified, you can specify a default icon using treeOptions.defaultIcon.

```js
   treeView.treeOptions.iconImagesRoot = "/images/flags/";
   treeView.treeOptions.iconImages = [
       "kr.png", "de.png", "es.png", "fr.png", "grd_treeicon_leaf.png", "hu.png", "is.png",
       "ox.png", "mx.png", "pt.png", "us.png", "ve.png"
   ]
   treeView.treeOptions.defaultIcon = 4;
```

## Array Type

When importing search data, you must specify the iconIndex to display and retrieve the value.
The retrieved iconIndex value is specified in the 5th param of setRows().

```js
treeProvider.setRows(data, 'treeId', false, null, "iconField");
```


```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: "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 { 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) => {
    fetch('/data/en/areatree.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setRows(data, 'treeId', false, null, "iconField");
        tree.refresh();
      });
  }
}, {
  fields
});

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

```js
[
   {
     "treeId": "11",
     "treeName": "Seoul",
     "area1code": "11",
     "area1name": "Seoul",
     "iconField": "0"
   },
   {
     "treeId": "11.010",
     "treeName": "Jongno-gu",
     "area1code": "11",
     "area1name": "Seoul",
     "area2code": "11010",
     "area2name": "Jongno-gu",
     "iconField": "1"
   },
...skip...
```

## Object Type

When importing search data in the same way as Array Type, you must specify the iconIndex to display and retrieve the value.
The imported iconIndex value is specified in the 4th param of setObjectRows().

```js
treeProvider.setObjectRows(data, "rows", "", "icon");
```

```js
const fields = [
  { fieldName: "icon", dataType: "number" },
  { fieldName: "col0", dataType: "text" },
  { fieldName: "col1", dataType: "number" },
  { fieldName: "col2", dataType: "number" },
  { fieldName: "col3", dataType: "number" },
  { fieldName: "col4", dataType: "number" },
  { fieldName: "col5", dataType: "number" },
  { fieldName: "col6", dataType: "number" },
  { fieldName: "col7", dataType: "number" }
];

const columns = [
  { name: "col0", fieldName: "col0", type: "data", width: "150", header: { text: "Type" } },
  { name: "col1", fieldName: "col1", type: "data", width: "80", numberFormat: "#,##0", header: { text: "Agriculture/Forestry/Fishery" } },
  { name: "col2", fieldName: "col2", type: "data", width: "75", numberFormat: "#,##0", header: { text: "Mining" } },
  { name: "col3", fieldName: "col3", type: "data", width: "75", numberFormat: "#,##0", header: { text: "Manufacturing" } },
  { name: "col4", fieldName: "col4", type: "data", width: "80", numberFormat: "#,##0", header: { text: "Construction" } },
  { name: "col5", fieldName: "col5", type: "data", width: "130", numberFormat: "#,##0", header: { text: "Wholesale/Retail, Consumer Goods" } },
  { name: "col6", fieldName: "col6", type: "data", width: "90", numberFormat: "#,##0", header: { text: "Food/Lodging" } },
  { name: "col7", fieldName: "col7", type: "data", width: "120", numberFormat: "#,##0", header: { text: "Transport, Warehousing, Telecom" } }
];

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: [
      "male.png",
      "female.png",
      "grd_tree_open.png",
      "fr.png",
      "br.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "fr.png",
      "br.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "kr.png"
    ]
  },
  onInitialized: (tree) => {
    fetch('/data/en/treedata.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setObjectRows(data, "rows", "", "icon");
        tree.refresh();
      });
  }
}, {
  fields
});

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

```js
{
   "rows": [{
       "icon": "0",
       "col0": "Man",
       "col1": "11723",
       "col2": "1258",
       "col3": "29500",
       "col4": "21401",
       "col5": "28261",
       "col6": "3732",
       "col7": "7393",
       "rows": [{
           "icon": "2",
           "col0": "Asia",
           "col1": "4244",
           "col2": "133",
           "col3": "11565",
           "col4": "5866",
           "col5": "9024",
           "col6": "2256",
           "col7": "4129",
...skip...
```