RealGrid2 Guide
Tree
Manipulating tree nodes

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.

//Expand all
treeView.expandAll();
 
//Collapse all
treeView.collapseAll();

Expand tree node selection & collapse selection

TreeView has functions for collapsing and expanding tree nodes.

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.

   treeView.editOptions.movable = true;

Go using the API

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(). Let’s move ‘Cyprus’ from Man-Asia to Man-North America.

//Cyprus dataRow 3, North America dataRow 7
treeProvider.changeRowParent(3, 7, 0);
Tree - Xml DataTree icon1