
# Tree - Xml Data

You can use XML data to implement a TreeView.

```js
const fields = [
  { fieldName: "icon" },
  { fieldName: "tree" },
  { fieldName: "do" },
  { fieldName: "si" },
  { fieldName: "gu" }
];

const columns = [
  {
    name: "do",
    fieldName: "do",
    width: "150",
    header: { text: "Province" }
  },
  {
    name: "si",
    fieldName: "si",
    width: "100",
    header: { text: "when" }
  },
  {
    name: "gu",
    fieldName: "gu",
    width: "100",
    header: { text: "Gu" }
  }
];

const xmlData =
  "<rows>" +
  "  <row icon='0' do='Gyeonggi-do'>" +
  "    <row icon='0' do='Gyeonggi-do' si='Seongnam'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Bundang-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Sujeong-gu'/>" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Suwon'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Paldal-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Yeongtong-gu' />" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Anyang' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Uijeongbu' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Gimpo' />" +
  "  </row>" +
  "</rows>";

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) => {
    tree.getDataSource().fillXmlData(xmlData, "rows", "", "");
    tree.expandAll();
  }
}, {
  fields
});

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

#### XML data structure

The code below is XML format data to implement a tree.

```js
var data =
   "<rows>"+
   " <row icon='0' do='Gyeonggi-do'>"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si'>"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si' gu='Bundang-gu' />"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si' gu='Sujeong-gu'/>"+
   " </row>"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si'>"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si' gu='Paldal-gu' />"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si' gu='Yeongtong-gu' />"+
   " </row>"+
   " <row icon='0' do='Gyeonggi-do' si='Anyang-si' />"+
   " <row icon='0' do='Gyeonggi-do' si='Uijeongbu-si' />"+
   " <row icon='0' do='Gyeonggi-do' si='Gimpo-si' />"+
   " </row>"+
   "</rows>";
```

#### Implementing a tree with XML data

You can use the two functions below to implement a tree with `XML data`.

```js
const fields = [
  { fieldName: "icon" },
  { fieldName: "tree" },
  { fieldName: "do" },
  { fieldName: "si" },
  { fieldName: "gu" }
];

const columns = [
  {
    name: "do",
    fieldName: "do",
    width: "150",
    header: { text: "Province" }
  },
  {
    name: "si",
    fieldName: "si",
    width: "100",
    header: { text: "when" }
  },
  {
    name: "gu",
    fieldName: "gu",
    width: "100",
    header: { text: "Gu" }
  }
];

const xmlData =
  "<rows>" +
  "  <row icon='0' do='Gyeonggi-do'>" +
  "    <row icon='0' do='Gyeonggi-do' si='Seongnam'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Bundang-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Sujeong-gu'/>" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Suwon'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Paldal-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Yeongtong-gu' />" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Anyang' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Uijeongbu' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Gimpo' />" +
  "  </row>" +
  "</rows>";

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) => {
    tree.getDataSource().fillXmlData(xmlData, "rows", "", "");
    tree.expandAll();
  }
}, {
  fields
});

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

function btnClearRows() {
  dataProvider.clearRows();
}

function btnSetXmlRows() {
  dataProvider.setXmlRows(xmlData, "row", "", "icon");
  treeView.expandAll();
}
```

- [TreeDataProvider.setXmlRows()](/refs/Class/LocalTreeDataProvider#setxmlrows)
- [TreeDataProvider.fillXmlData()](/refs/Class/LocalTreeDataProvider#fillxmldata)

First, [setXmlRows()](/refs/Class/LocalTreeDataProvider#setxmlrows)
Let's implement the tree by calling a function.


```js
// Enter XML data
treeDataProvider.setXmlRows(data, "row", "", "icon");
treeView.expandAll();
```

```js
const fields = [
  { fieldName: "icon" },
  { fieldName: "tree" },
  { fieldName: "do" },
  { fieldName: "si" },
  { fieldName: "gu" }
];

const columns = [
  {
    name: "do",
    fieldName: "do",
    width: "150",
    header: { text: "Province" }
  },
  {
    name: "si",
    fieldName: "si",
    width: "100",
    header: { text: "when" }
  },
  {
    name: "gu",
    fieldName: "gu",
    width: "100",
    header: { text: "Gu" }
  }
];

const xmlData =
  "<rows>" +
  "  <row icon='0' do='Gyeonggi-do'>" +
  "    <row icon='0' do='Gyeonggi-do' si='Seongnam'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Bundang-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Sujeong-gu'/>" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Suwon'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Paldal-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Yeongtong-gu' />" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Anyang' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Uijeongbu' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Gimpo' />" +
  "  </row>" +
  "</rows>";

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) => {
    tree.getDataSource().fillXmlData(xmlData, "rows", "", "");
    tree.expandAll();
  }
}, {
  fields
});

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

function btnClearRows() {
  dataProvider.clearRows();
}

function btnFillXmlData() {
  dataProvider.fillXmlData(xmlData, { rows: "row", icon: "icon" });
  treeView.expandAll();
}
```

Same data as [fillXmlData()](/refs/Class/LocalTreeDataProvider#fillxmldata)
Let's implement a tree using functions.


```js
// clear data
treeDataProvider.clearRows();

// Enter XML data
treeDataProvider.fillXmlData(data, {rows: "row", icon: "icon"});
treeView.expandAll();
```

The results of running both functions are the same.

#### XML data hierarchy for tree implementation

Nodes in XML must have a start-tag and end-tag pair.

```xml
<rows>
   <row field=value> <!-- parent node -->
     <row field=value /> <!-- child nodes -->
     ...
     <row field=value />
   </row>
</rows>
```

Another node contained between the start and end tags of the `parent node (rows tag above)` refers to the `child node (row tag above)`.

The notable part of the data in this demo is a `node` named `row`.
This node is an `element` to express the hierarchy of the tree.

Below is the definition of the [TreeDataProvider.setXmlRows()](/refs/Class/LocalTreeDataProvider#setxmlrows) function.
The above property name, `'rows'`, must be passed as the value of `rowsElement`, the second argument of this function.

```js
function setXmlRows(xml, rowElement, childrenField, iconField) {}
```

Below is the definition of the [TreeDataProvider.fillXmlData()](/refs/Class/LocalTreeDataProvider#fillxmldata) function.
The second argument, `options`, i.e. [DataFillOptions](/refs/Interface/DataFillOptions#data)
The above property name, `'rows'`, must be passed as the value of the `rows` property.

```js
function fillXmlData(data, options) {}
```