
# treeview

RealGrid's TreeView provides various APIs to manipulate tree nodes. In addition to folding and expanding, there are also functions that use RowId to move nodes between parents and children or to know the number of child nodes.

## Expand all tree nodes & collapse all tree nodes

TreeView has functions for collapsing and expanding tree nodes.

* [TreeView.expandAll()](/refs/Class/TreeView#expandall): Expand all nodes
* [TreeView.collapseAll()](/refs/Class/TreeView#collapseall): Collapse all nodes

```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_close.png",
      "grd_tree_open.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gb.png",
      "gr.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gr.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;

function expandAll() {
  treeView.expandAll();
}

function collapseAll() {
  treeView.collapseAll();
}
```

```js
//Expand all
treeView.expandAll();

//Collapse all
treeView.collapseAll();
```

## Expand tree node selection & collapse selection

TreeView has functions for collapsing and expanding tree nodes.

* [TreeView.expand()](/refs/Class/TreeView#expand): Expand selection node.
* [TreeView.collapse()](/refs/Class/TreeView#collapse): Collapse selection node

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

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

function expand() {
  var current = treeView.getCurrent();
  var recursive = document.getElementById("checkRecursive").checked;
  var force = document.getElementById("checkForce").checked;
  
  treeView.expand(current.itemIndex, recursive, force);
}

function collapse() {
  var current = treeView.getCurrent();
  var recursive = document.getElementById("checkRecursive").checked;
  var force = document.getElementById("checkForce").checked;

  treeView.collapse(current.itemIndex, recursive);
}
```

```js
var current = treeView.getCurrent();
var recursive = document.getElementById("checkRecursive").checked;
var force = document.getElementById("checkForce").checked;

//Expand selected node
treeView.expand(current.itemIndex, recursive, force);

//Collapse selected node
treeView.collapse(current.itemIndex, recursive);
```

## Move the order of sibling nodes up/down

You can move a specific node up/down among `same siblings`.
You can move it using the API or use mouse drag and drop.

### Mouse Drag and Drop

When you select a node to move with the mouse or select a range and place the mouse pointer in front of the node, the mouse pointer changes to a + shape. At that time, you can move it by dragging and dropping.
To use mouse drag and drop, you must set it up in advance as shown below.

```js
   treeView.editOptions.movable = true;
```

### Go using the API

* [TreeProvider.moveRowSibling():](/refs/Class/LocalTreeDataProvider#moverowsibling): Move up/down

```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
  },
  edit: {
    movable: true
  },
  treeOptions: {
    iconImagesRoot: "/images/flags/",
    iconImages: [
      "male.png",
      "female.png",
      "grd_tree_close.png",
      "grd_tree_open.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gb.png",
      "gr.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gr.png"
    ]
  },
  onInitialized: (tree) => {
    fetch('/data/en/treedata.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setObjectRows(data, "rows", "", "icon");
        tree.refresh();
        tree.expandAll();
        tree.setFocus();
      });
  }
}, {
  fields
});

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

function moveUp() {
  var current = treeView.getCurrent();
  dataProvider.moveRowSibling(current.dataRow, -1);
  treeView.setCurrent({dataRow: current.dataRow});
}

function moveDown() {
  var current = treeView.getCurrent();
  dataProvider.moveRowSibling(current.dataRow, +1);
  treeView.setCurrent({dataRow: current.dataRow});
}
```

```js
var current = treeView.getCurrent();

//Move the node up one line
treeProvider.moveRowSibling(current.dataRow, -1);
treeView.setCurrent({dataRow: current.dataRow});

//Move the node down one line
treeProvider.moveRowSibling(current.dataRow, +1);
treeView.setCurrent({dataRow: current.dataRow});
```

## Move to a child of another parent node

Changing to a child of a different parent is handled using [TreeProvider.changeRowParent()](/refs/Class/LocalTreeDataProvider#changerowparent).
Let’s move ‘Cyprus’ from Man-Asia to Man-North America.

```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
  },
  edit: {
    movable: true,
    rowMovable: true
  },
  treeOptions: {
    iconImagesRoot: "/images/flags/",
    iconImages: [
      "male.png",
      "female.png",
      "grd_tree_close.png",
      "grd_tree_open.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gb.png",
      "gr.png",
      "hu.png",
      "is.png",
      "kr.png",
      "mx.png",
      "pt.png",
      "us.png",
      "ve.png",
      "br.png",
      "de.png",
      "es.png",
      "fr.png",
      "gr.png"
    ]
  },
  onInitialized: (tree) => {
    fetch('/data/en/treedata.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setObjectRows(data, "rows", "", "icon");
        tree.refresh();
        tree.expandAll();
        tree.setFocus();
      });
  }
}, {
  fields
});

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

function changeParent() {
  dataProvider.changeRowParent(3, 7, 0);
}
```

```js
//Cyprus dataRow 3, North America dataRow 7
treeProvider.changeRowParent(3, 7, 0);
```