
# tree icon

You can specify default, expanded, and closed icons using treeOptions.defaultIcon, expandedIcon, and collapsedIcon.

```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: "iconControl", 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: "iconControl", name: "iconControl" }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (tree) => {
    fetch('/data/en/areatree.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setRows(data, 'treeId', false, null, "iconControl");
        tree.refresh();
        tree.expandAll();
      });
  }
}, {
  fields
});

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

function setIcon() {
  treeView.treeOptions.iconImagesRoot = "/images/treeImage/";
  treeView.treeOptions.iconImages = [
    "grd_tree_open.png",
    "grd_tree_close.png",
    "grd_treeicon_leaf.png"
  ];
  treeView.treeOptions.expandedIcon = 0;
  treeView.treeOptions.collapsedIcon = 1;
  treeView.treeOptions.defaultIcon = 2;
}
```

```js
   treeView.treeOptions.iconImagesRoot = "/images/treeImage/";
   treeView.treeOptions.iconImages = [
       "grd_tree_open.png", "grd_tree_close.png", "grd_treeicon_leaf.png"
   ]
   treeView.treeOptions.expandedIcon = 0;
   treeView.treeOptions.collapsedIcon = 1;
   treeView.treeOptions.defaultIcon = 2;
```