Main Content

uitreenode

Create tree node component

Description

node = uitreenode creates a tree node UI component inside a tree within a new figure window and returns the TreeNode object. MATLAB® calls the uifigure function to create the figure.

node = uitreenode(parent) creates a tree node in the specified parent container. The parent container can be a Tree or TreeNode object.

node = uitreenode(parent,sibling) creates a tree node in the specified parent container, after the specified sibling node.

node = uitreenode(parent,sibling,location) creates a tree node, and places it after or before the sibling node. Specify location as 'after' or 'before'.

example

node = uitreenode(___,Name,Value) specifies TreeNode property values using one or more Name,Value pair arguments. Specify Name,Value as the last set of arguments when you use any of the previous syntaxes.

Examples

collapse all

Create a tree that contains a parent node called Sample Data with a child node called Sample 1. Expand the tree to see both nodes.

fig = uifigure;
t = uitree(fig);
parent = uitreenode(t,'Text','Sample Data');
child = uitreenode(parent,'Text','Sample 1');
expand(t)

Tree with two nodes.

Create an app that displays athlete names grouped by sport. When the app user clicks on a name, MATLAB displays data about the athlete.

Create a program file called mytreeapp.m that contains the following commands to create a tree, a set of nested tree nodes, and a callback function for the tree. The SelectionChangedFcn property specifies the function to execute when the user clicks a node in the tree.

function mytreeapp
    fig = uifigure;
    t = uitree(fig,'Position',[20 20 150 150]);

    % Assign callback in response to node selection
    t.SelectionChangedFcn = @nodechange;

    % First level nodes
    category1 = uitreenode(t,'Text','Runners','NodeData',[]);
    category2 = uitreenode(t,'Text','Cyclists','NodeData',[]);

    % Second level nodes.
    % Node data is age (y), height (m), weight (kg)
    p1 = uitreenode(category1,'Text','Joe','NodeData',[40 1.67 58] );
    p2 = uitreenode(category1,'Text','Linda','NodeData',[49 1.83 90]);
    p3 = uitreenode(category2,'Text','Rajeev','NodeData',[25 1.47 53]);
    p4 = uitreenode(category2,'Text','Anne','NodeData',[88 1.92 100]);

    % Expand the tree
    expand(t);
    
    % Create the function for the SelectionChangedFcn callback
    % When the function is executed, it displays the data of the selected item
    function nodechange(src,event)
        node = event.SelectedNodes;
        display(node.NodeData);
    end
end

When the user runs mytreeapp and clicks a node in the tree, MATLAB displays the NodeData for that node.

Create a tree that populates nodes based on the data in a table.

Create a figure with a grid layout manager to hold the UI components. Load sample data on electric utility outages and create a table UI component to display the data. Then, create a tree to hold nodes listing the regions and causes of the outages.

fig = uifigure;
gl = uigridlayout(fig,[1 2]);
gl.ColumnWidth = {'2x','1x'};

T = readtable('outages.csv');
T = T(1:20,{'Region','OutageTime','Loss','Cause'});
tbl = uitable(gl,'Data',T);

tr = uitree(gl);

Specify the table variables to display in the tree. For each of those variables, create a top-level node whose text is the variable name. Extract the relevant data by converting the table entries for the variable to a categorical array and returning the list of categories as names. Then, loop through the categories. For each element, add a node to the tree under the appropriate parent node.

vars = {'Region','Cause'};

for k1 = 1:length(vars)
    var = vars{k1};
    varnode = uitreenode(tr,'Text',var);
    rows = T{:,var};
    names = categories(categorical(rows));
         
    for k2 = 1:length(names)
        text = names{k2};
        uitreenode(varnode,'Text',text);
    end
end

Expand the tree to see all the nodes.

expand(tr)

Figure window with a table and a tree. The table contains outage sample data, and the tree contains a node for each region and cause in the table data.

Style nodes in a tree that showcases a file structure to visually distinguish different file types.

Create a tree UI component. Each top-level node represents a folder. Each child node represents a file in that folder. Expand the tree to see all the nodes.

fig = uifigure('Position',[300 300 350 400]);
t = uitree(fig);

% Parent nodes
n1 = uitreenode(t,'Text','App 1');
n2 = uitreenode(t,'Text','App 2');
n3 = uitreenode(t,'Text','Images');

% Child nodes
n11 = uitreenode(n1,'Text','myapp1.m');
n21 = uitreenode(n2,'Text','myapp2.m');
n22 = uitreenode(n2,'Text','app2callback.m');
n31 = uitreenode(n3,'Text','peppers.png');
n32 = uitreenode(n3,'Text','corn.tif');

expand(t)

Tree with three top-level nodes with text "App 1", "App 2", and "Images", and nested nodes with file names.

Create three styles: one with a bold font weight, one with an italic font angle, and one with a blue font color.

dirStyle = uistyle('FontWeight','bold');
imgStyle = uistyle('FontAngle','italic');
mStyle = uistyle('FontColor','blue');

Apply the bold style to the top-level nodes to distinguish the nodes that represent folders. Apply the blue style to the children of the App 1 and App 2 nodes to distinguish the nodes that represent MATLAB program files. Finally, apply the italic style to the nodes that represent image files.

addStyle(t,dirStyle,'level',1); 
addStyle(t,mStyle,'node',[n1.Children;n2.Children]);
addStyle(t,imgStyle,'node',[n31 n32]);

Tree UI component. The "App 1", "App 2", and "Images" nodes are bold, the nodes with file names that end in .m are blue, and the image file names are italic.

Create a context menu with actions appropriate to a tree component. Assign the context menu to the top-level tree nodes in a tree.

In a UI figure, create a tree with four top-level nodes and a set of nested nodes.

fig = uifigure;

tree = uitree(fig,'Position',[20 200 175 100]);

category1 = uitreenode(tree,'Text','Runners');
r1 = uitreenode(category1,'Text','Joe');
r2 = uitreenode(category1,'Text','Linda');

category2 = uitreenode(tree,'Text','Cyclists');
c1 = uitreenode(category2,'Text','Rajeev');

category3 = uitreenode(tree,'Text','Hikers');
h1 = uitreenode(category3,'Text','Jack');

category4 = uitreenode(tree,'Text','Swimmers');
s1 = uitreenode(category4,'Text','Logan');

Tree with four visible nodes: Runners, Cyclists, Hikers, and Swimmers

Create a context menu with three menu items. For the last menu item, create four submenus.

cm = uicontextmenu(fig);
m1 = uimenu(cm,'Text','Expand All');
m2 = uimenu(cm,'Text','Collapse All');
m3 = uimenu(cm,'Text','Scroll To...');

sbm1 = uimenu(m3,'Text','Runners');
sbm2 = uimenu(m3,'Text','Cyclists');
sbm3 = uimenu(m3,'Text','Hikers');
sbm4 = uimenu(m3,'Text','Swimmers');

Then, assign the context menu to the top-level tree nodes by setting the ContextMenu property of each node to the ContextMenu object.

category1.ContextMenu = cm;
category2.ContextMenu = cm;
category3.ContextMenu = cm;
category4.ContextMenu = cm;

Right-click any of the top-level tree nodes to view the context menu.

Tree with a context menu. The context menu is associated with the Cyclists node. The "Scroll To" option is highlighted and it has a submenu with the options Runners, Cyclists, Hikers, and Swimmers.

At this point, the code is still unfinished. The context menu appears when you right-click, but selecting menu items does not have any effect. To finish implementing the behavior of the menu items, create a MenuSelectedFcn callback function.

Input Arguments

collapse all

Parent object, specified as a Tree or TreeNode object.

Sibling node, specified as a TreeNode object.

Location of the node relative to its sibling, specified as a 'after' or 'before'.

Name-Value Arguments

Example: node = uitreenode(t,'Text','Measurements') creates a tree node with the label, 'Measurements'.

Specify optional comma-separated pairs of Name,Value arguments. Name is the argument name and Value is the corresponding value. Name must appear inside single quotes (' '). You can specify several name and value pair arguments as Name1,Value1,...,NameN,ValueN.

The properties listed here are a subset. For a full list, see TreeNode Properties.

Node text, specified as a character vector or string scalar.

Icon source or file, specified as a character vector, a string scalar, or an m-by-n-by-3 truecolor image array. If you specify a file name, it can be an image file name on the MATLAB path or a full path to an image file. If you plan to share an app with others, put the image file on the MATLAB path to facilitate app packaging.

Supported image formats include JPEG, PNG, GIF, SVG, or m-by-n-by-3 truecolor image array. For more information about truecolor image arrays, see Image Types.

Example: 'icon.png' specifies an icon file on the MATLAB path.

Example: 'C:\Documents\icon.png' specifies a full path to an image file.

Node data, specified as an array of any type. Specify NodeData to share node-relevant data within your app code.

Introduced in R2017b