metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="A tree view that presents a hierarchical view of information. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>TreeView - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">TreeView</a></li> <li class="toc-entry"><a href="#_treeview_about">About</a></li> <li class="toc-entry"><a href="#_treeview_add_node">Create node</a></li> <li class="toc-entry"> <a href="#_treeview_inputs">Add inputs</a> <ul> <li class="toc-entry"><a href="#_treeview_inputs_checkbox">Checkbox</a></li> <li class="toc-entry"><a href="#_treeview_inputs_radio">Radio</a></li> <li class="toc-entry"><a href="#_treeview_inputs_switch">Switch</a></li> <li class="toc-entry"><a href="#_treeview_inputs_input">Input</a></li> <li class="toc-entry"><a href="#_treeview_inputs_select">Select</a></li> <li class="toc-entry"><a href="#_treeview_inputs_textarea">Textarea</a></li> </ul> </li> <li class="toc-entry"><a href="#_treeview_options_tree">Options tree</a></li> <li class="toc-entry"><a href="#_treeview_events">Events</a></li> <li class="toc-entry"><a href="#_treeview_methods">Methods</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>TreeView</h1> <p class="text-leader"> A tree view that presents a hierarchical view of information. Create treeview simple and easy with Metro 4. </p>  <h3 id="_treeview_about">About</h3> <p> To creating <code>treeview</code> we use <code><ul></code> element with role <code>data-role="treeview"</code>. Nodes are defined with <code><li></code> element. To create <code>subtree</code> just add an <code><ul></code> inside the <code><li></code>. </p> <pre><code class="html"> <ul data-role="treeview"> <li>...</li> ... <li>...</li> <ul> <li>...</li> ... <li>...</li> </ul> </ul> </code></pre> <h3 id="_treeview_add_node">Add node</h3> <p> <code>Node</code> is a <code><li></code> with special <code>data-*</code> attributes. The attributes are define: <code>icon</code> and <code>caption</code> of node. </p> <pre><code class="html"> <li data-icon="..." data-caption="..."></li> </code></pre> <div class="example"> <ul data-role="treeview"> <li data-icon="<span class='mif-star-full fg-red'></span>" data-caption="Favorites"> <ul> <li data-icon="<span class='mif-library fg-green'></span>" data-caption="Projects"></li> <li data-icon="<span class='mif-download fg-cyan'></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> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_treeview_inputs">Add inputs</h3> <p> You can add input controls into treeview nodes. A <strong>prerequisite</strong> is the need to put each <code>input</code> in a separate <code><li></code>. </p> <br> <h6 id="_treeview_inputs_checkbox">Checkbox</h6> <pre><code class="html"> <li><input type="checkbox" data-role="checkbox"></li> </code></pre> <h6 id="_treeview_inputs_radio">Radio</h6> <pre><code class="html"> <li><input type="radio" data-role="radio"></li> </code></pre> <h6 id="_treeview_inputs_switch">Switch</h6> <pre><code class="html"> <li><input type="checkbox" data-role="switch"></li> </code></pre> <h6 id="_treeview_inputs_input">Input</h6> <pre><code class="html"> <li><input type="text" data-role="input"></li> </code></pre> <h6 id="_treeview_inputs_select">Select</h6> <pre><code class="html"> <li><select data-role="select">...</select></li> </code></pre> <h6 id="_treeview_inputs_textarea">Textarea</h6> <pre><code class="html"> <li><textarea data-role="textarea"></textarea></li> </code></pre> <div class="example"> <ul data-role="treeview"> <li class="expanded" data-caption="Checkboxes"> <ul> <li><input type="checkbox" data-role="checkbox" data-caption="Play animation" title=""></li> <li><input type="checkbox" data-role="checkbox" data-caption="Play sound" checked="checked" title=""></li> <li><input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title=""></li> <li><input type="checkbox" data-role="checkbox" data-caption="Disabled checked" checked disabled title=""></li> </ul> </li> <li class="expanded" data-caption="Radios"> <ul> <li><input type="radio" name="r1" data-role="radio" data-caption="Play animation" title=""></li> <li><input type="radio" name="r1" data-role="radio" data-caption="Play sound" checked title=""></li> <li><input type="radio" data-role="radio" data-caption="Disabled" disabled title=""></li> <li><input type="radio" data-role="radio" data-caption="Disabled checked" checked disabled title=""></li> </ul> </li> <li class="expanded" data-caption="Switches"> <ul> <li><input type="checkbox" data-role="switch" data-caption="Play animation" title=""></li> <li><input type="checkbox" data-role="switch" data-caption="Play sound" checked title=""></li> <li><input type="checkbox" data-role="switch" data-caption="Disabled" disabled title=""></li> <li><input type="checkbox" data-role="switch" data-caption="Disabled checked" checked disabled title=""></li> </ul> </li> <li class="expanded" data-caption="Inputs"> <ul> <li style="width: 220px"><input data-role="input" title=""></li> <li style="width: 220px"> <select data-role="select" title=""> <option>Value 1</option> <option>Value 2</option> <option>Value 3</option> </select> </li> <li style="width: 220px"><textarea data-role="textarea" title=""></textarea></li> </ul> </li> </ul> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_treeview_options_tree">Options tree</h3> <p> If you need to create <code>options tree</code>, you can deal with this easy with Metro 4 <code>treeview</code> component. <strong>You do not need any special actions, just add the checkboxes to nodes</strong>. <code>Indeterminate</code> state for checkboxes will be enabled automatically. </p> <div class="example"> <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> </div> <pre><code class="html"> <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> </code></pre>  <h3 id="_treeview_events">Events</h3> <p> When <code>treeview</code> works, it generated the numbers of events. You can use callback for this events to behavior with <code>treeview</code>. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onNodeClick(node, tree)</td> <td><code>data-on-node-click</code></td> <td>Fired when user click on node caption</td> </tr> <tr> <td>onNodeDblClick(node, tree)</td> <td><code>data-on-node-dblclick</code></td> <td>Fired when user dblclick on node caption</td> </tr> <tr> <td>onNodeInsert(node, tree)</td> <td><code>data-on-node-insert</code></td> <td>Fired when node was inserted</td> </tr> <tr> <td>onNodeDelete(node, tree)</td> <td><code>data-on-node-delete</code></td> <td>Fired when node was deleted</td> </tr> <tr> <td>onNodeClean(node, tree)</td> <td><code>data-on-node-clean</code></td> <td>Fired when node was cleaned</td> </tr> <tr> <td>onCheckClick(state, check, node, tree)</td> <td><code>data-on-check-click</code></td> <td>Fired when user click on checkbox</td> </tr> <tr> <td>onRadioClick(state, check, node, tree)</td> <td><code>data-on-radio-click</code></td> <td>Fired when user click on radio input</td> </tr> <tr> <td>onExpandNode(node, tree)</td> <td><code>data-on-expand-node</code></td> <td>Fired when node was expanded</td> </tr> <tr> <td>onCollapseNode(node, tree)</td> <td><code>data-on-collapse-node</code></td> <td>Fired when node was collapsed</td> </tr> <tr> <td>onTreeviewCreate(node, tree)</td> <td><code>data-on-treeview-create</code></td> <td>Fired when tree was created</td> </tr> </tbody> </table> <h3 id="_treeview_methods">Methods</h3> <p> You can use <code>treeview</code> methods to interact with the component. </p> <ul> <li><strong>toggleNode(node)</strong> - toggle node state</li> <li><strong>addTo(node, data)</strong> - add child node</li> <li><strong>insertBefore(node, data)</strong> - add new node before specified node</li> <li><strong>insertAfter(node, data)</strong> - add new node after specified node</li> <li><strong>del(node)</strong> - delete node from tree</li> <li><strong>clean(node)</strong> - clean node</li> </ul> <div class="example"> <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=" var tv = $('#tv_1'); tv.data('treeview').addTo(tv.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=" var tv = $('#tv_1'); tv.data('treeview').insertBefore(tv.find('.current'), { caption: 'Before node' }) ">Insert before</button> <button class="button" onclick=" var tv = $('#tv_1'); tv.data('treeview').insertAfter(tv.find('.current'), { caption: 'After node' }) ">Insert after</button> <button class="button" onclick=" var tv = $('#tv_1'); tv.data('treeview').del(tv.find('.current')) ">Delete</button> <button class="button" onclick=" var tv = $('#tv_1'); tv.data('treeview').clean(tv.find('.current')) ">Clear</button> <hr> <ul data-role="treeview" id="tv_1"></ul> </div> <pre><code class="html"> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>