TreeView

A tree view that presents a hierarchical view of information. Create treeview simple and easy with Metro 4.

About

To creating treeview we use <ul> element with role data-role="treeview". Nodes are defined with <li> element. To create subtree just add an <ul> inside the <li>.


                    <ul data-role="treeview">
                        <li>...</li>
                        ...
                        <li>...</li>
                        <ul>
                            <li>...</li>
                            ...
                            <li>...</li>
                        </ul>
                    </ul>
                

Add node

Node is a <li> with special data-* attributes. The attributes are define: icon and caption of node.


                    <li data-icon="..." data-caption="..."></li>
                

                    <ul data-role="treeview">
                        <li data-icon="<span class='mif-star-full'></span>" data-caption="Favorites">
                            <ul>
                                <li data-icon="<span class='mif-library'></span>" data-caption="Projects"></li>
                                <li data-icon="<span class='mif-download'></span>" data-caption="Downloads"></li>
                                <li data-icon="<img src='images/desktop.png'>" data-caption="Desktop"></li>
                            </ul>
                        </li>
                        <li data-icon="<span class='mif-onedrive'></span>" data-caption="OneDrive">
                            <ul>
                                <li data-caption="Documents"></li>
                                <li data-caption="Projects">
                                    <ul>
                                        <li data-caption="Web"></li>
                                        <li data-caption="Android"></li>
                                        <li data-caption="Windows"></li>
                                        <li data-caption="iOS"></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                

Add inputs

You can add input controls into treeview nodes. A prerequisite is the need to put each input in a separate <li>.


Checkbox

                    <li><input type="checkbox" data-role="checkbox"></li>
                
Radio

                    <li><input type="radio" data-role="radio"></li>
                
Switch

                    <li><input type="checkbox" data-role="switch"></li>
                
Input

                    <li><input type="text" data-role="input"></li>
                
Select

                    <li><select data-role="select">...</select></li>
                
Textarea

                    <li><textarea data-role="textarea"></textarea></li>
                

                    <ul data-role="treeview">
                        <li class="expanded" data-caption="Checkboxes">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Play animation"></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Play sound" checked></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Disabled checked" checked disabled></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Radios">
                            <ul>
                                <li><input type="radio" name="r1" data-role="radio" data-caption="Play animation"></li>
                                <li><input type="radio" name="r1" data-role="radio" data-caption="Play sound" checked></li>
                                <li><input type="radio" data-role="radio" data-caption="Disabled" disabled></li>
                                <li><input type="radio" data-role="radio" data-caption="Disabled checked" checked disabled></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Switches">
                            <ul>
                                <li><input type="checkbox" data-role="switch" data-caption="Play animation"></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Play sound" checked></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Disabled" disabled></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Disabled checked" checked disabled></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Inputs">
                            <ul>
                                <li style="width: 220px"><input type="text" data-role="input"></li>
                                <li style="width: 220px">
                                    <select data-role="select">
                                        <option value="1">Value 1</option>
                                        <option value="2">Value 2</option>
                                        <option value="3">Value 3</option>
                                    </select>
                                </li>
                                <li style="width: 220px"><textarea data-role="textarea"></textarea></li>
                            </ul>
                        </li>
                    </ul>
                

Options tree

If you need to create options tree, you can deal with this easy with Metro 4 treeview component. You do not need any special actions, just add the checkboxes to nodes. Indeterminate state for checkboxes will be enabled automatically.


                    <ul data-role="treeview">
                        <li>
                            <input type="checkbox" data-role="checkbox" data-caption="Play video" title="">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="AVI" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="MPEG" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="VIDX" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="MP4" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="XVID" title=""></li>
                            </ul>
                        </li>
                        <li><input type="checkbox" data-role="checkbox" data-caption="Play audio" title=""></li>
                        <li>
                            <input type="checkbox" data-role="checkbox" data-caption="Subtitles" title="">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="English" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="Ukrainian" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Dutch" title=""></li>
                            </ul>
                        </li>
                    </ul>
                

Events

When treeview works, it generated the numbers of events. You can use callback for this events to behavior with treeview.

Event Data-* Desc
onNodeClick(node, tree) data-on-node-click Fired when user click on node caption
onNodeDblClick(node, tree) data-on-node-dblclick Fired when user dblclick on node caption
onNodeInsert(node, tree) data-on-node-insert Fired when node was inserted
onNodeDelete(node, tree) data-on-node-delete Fired when node was deleted
onNodeClean(node, tree) data-on-node-clean Fired when node was cleaned
onCheckClick(state, check, node, tree) data-on-check-click Fired when user click on checkbox
onRadioClick(state, check, node, tree) data-on-radio-click Fired when user click on radio input
onExpandNode(node, tree) data-on-expand-node Fired when node was expanded
onCollapseNode(node, tree) data-on-collapse-node Fired when node was collapsed
onTreeviewCreate(node, tree) data-on-treeview-create Fired when tree was created

Methods

You can use treeview methods to interact with the component.

  • toggleNode(node) - toggle node state
  • addTo(node, data) - add child node
  • insertBefore(node, data) - add new node before specified node
  • insertAfter(node, data) - add new node after specified node
  • del(node) - delete node from tree
  • clean(node) - clean node

    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').addTo(null, {
                                caption: 'New node',
                                icon: '<span class=\'mif-air\'></span>'
                            })
                        ">Add node</button>
    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').addTo($('#tv_1').find('.current'), {
                                caption: 'New node'
                            })
                        ">Add subnode</button>
    
                        <button class="button" onclick="
                            var tv = $('#tv_1');
                            tv.data('treeview').addTo(tv.find('.current'), {
                                html: '<input data-role=checkbox data-caption=Checkbox>'
                            })
                        ">Add checkbox</button>
    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').insertBefore($('#tv_1').find('.current'), {
                                caption: 'Before node'
                            })
                        ">Insert before</button>
    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').insertAfter($('#tv_1').find('.current'), {
                                caption: 'After node'
                            })
                        ">Insert after</button>
    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').del($('#tv_1').find('.current'))
                        ">Delete</button>
    
                        <button class="button" onclick="
                            $('#tv_1').data('treeview').clean($('#tv_1').find('.current'))
                        ">Clear</button>
    
                        <hr>
    
                        <ul data-role="treeview" id="tv_1"></ul>