
# Tree node information

RealGrid's TreeView provides various APIs to retrieve information about tree nodes.
You can get the rowId of the ancestor, parent, child, and descendant node of a specific node and check the level.

## TreeLocalProvider ancestors, parents, children, descendants

TreeLocalProivder There are functions that can check tree node information.
The row information returned is rowId (dataRow), and the rowId is retrieved correctly even if the node to be retrieved is collapsed and not visible.

* [TreeLocalProivder.getAncestors()](/refs/Class/LocalTreeDataProvider#getancestors): Get ancestor node row.
* [TreeLocalProivder.getParent()](/refs/Class/LocalTreeDataProvider#getparent): Get parent node row.
* [TreeLocalProivder.getChildren()](/refs/Class/LocalTreeDataProvider#getchildren): Get child node row.
* [TreeLocalProivder.getDescendants()](/refs/Class/LocalTreeDataProvider#getdescendants): Get descendant node rows.

The value of rowIndicator in the demo below is displayed as rowId(dataRow) to make it easier to check the value.

```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
  },
  rowIndicator: {
    displayValue: "row",
    zeroBase: 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.setFocus();
      });
  }
}, {
  fields
});

function getAncestors() {
  const dataRow = treeView.getCurrent().dataRow;
  const ancestors = dataProvider.getAncestors(dataRow);
  alert(ancestors);
}

function getParent() {
  const dataRow = treeView.getCurrent().dataRow;
  const parent = dataProvider.getParent(dataRow);
  alert(parent);
}

function getChildren() {
  const dataRow = treeView.getCurrent().dataRow;
  const children = dataProvider.getChildren(dataRow);
  alert(children);
}

function getDescendants() {
  const dataRow = treeView.getCurrent().dataRow;
  const descendants = dataProvider.getDescendants(dataRow);
  alert(descendants);
}

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

```js
function getAncestors() {
     const dataRow = treeView.getCurrent().dataRow;
     const ancestors = treeProvider.getAncestors(dataRow);
     alert(ancestors);
}

function getParent() {
     const dataRow = treeView.getCurrent().dataRow;
     const parent = treeProvider.getParent(dataRow);
     alert(parent);
}

function getChildren() {
     const dataRow = treeView.getCurrent().dataRow;
     const children = treeProvider.getChildren(dataRow);
     alert(children);
}

function getDescendants() {
     const dataRow = treeView.getCurrent().dataRow;
     const descendants = treeProvider.getDescendants(dataRow);
     alert(descendants);
}
```

## TreeView ancestors, parents, children, descendants

TreeView has functions that allow you to check tree node information.
The returned row information is itemIndex, and if the node to be retrieved is collapsed and is not visible, -1 is returned.

* [TreeView.getAncestors()](/refs/Class/TreeView#getancestors): Get ancestor node rows.
* [TreeView.getParent()](/refs/Class/TreeView#getparent): Get the parent node row.
* [TreeView.getChildren()](/refs/Class/TreeView#getchildren): Get child node row.
* [TreeView.getDescendants()](/refs/Class/TreeView#getdescendants): Get descendant node rows.

```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.setFocus();
      });
  }
}, {
  fields
});

function getAncestors() {
  const itemIndex = treeView.getCurrent().itemIndex;
  const ancestors = treeView.getAncestors(itemIndex, true);
  alert(ancestors);
}

function getParent() {
  const itemIndex = treeView.getCurrent().itemIndex;
  const parent = treeView.getParent(itemIndex);
  alert(parent);
}

function getChildren() {
  const itemIndex = treeView.getCurrent().itemIndex;
  const children = treeView.getChildren(itemIndex);
  alert(children);
}

function getDescendants() {
  const itemIndex = treeView.getCurrent().itemIndex;
  const descendants = treeView.getDescendants(itemIndex);
  alert(descendants);
}

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

```js
function getAncestors() {
     const itemIndex = treeView.getCurrent().itemIndex;
     const ancestors = treeView.getAncestors(itemIndex, true);
     alert(ancestors);
}

function getParent() {
     const itemIndex = treeView.getCurrent().itemIndex;
     const parent = treeView.getParent(itemIndex);
     alert(parent);
}

function getChildren() {
     const itemIndex = treeView.getCurrent().itemIndex;
     const children = treeView.getChildren(itemIndex);
     alert(children);
}

function getDescendants() {
     const itemIndex = treeView.getCurrent().itemIndex;
     const descendants = treeView.getDescendants(itemIndex);
     alert(descendants);
}
```