Adding Nodes
To add nodes to a TreeView control, add a new data item to the tree's itemsSource array (at the proper position), then refresh the tree by calling the loadTree method:
Parent 1
Child 1.1
Child 1.2
Child 1.3
Parent 2
Child 2.1
Child 2.2
Parent 3
Child 3.1
New Node:
Add Node:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | // This file locates: "Scripts/Lesson/C1Nav/Adding.js". c1.documentReady(function () { var theTree = wijmo.Control.getControl( '#theTree' ); theTree.itemsSource = getData(); theTree.displayMemberPath = 'header' ; theTree.childItemsPath = 'items' ; theTree.selectedItem = theTree.itemsSource[0]; // handle buttons document.getElementById( 'btnBefore' ).addEventListener( 'click' , function () { addNode( 'before' ); }); document.getElementById( 'btnAfter' ).addEventListener( 'click' , function () { addNode( 'after' ); }); document.getElementById( 'btnInto' ).addEventListener( 'click' , function () { addNode( 'into' ); }); // add a node function addNode(where) { var tree = theTree, item = tree.selectedItem; if (item) { // find the array where the new item should be added var path = 'items' ; var parent = tree.selectedNode.parentNode; var arr = parent ? parent.dataItem[path] : tree.itemsSource; // add the new item to the data tree var index = 0; switch (where) { case 'before' : index = arr.indexOf(item); break ; case 'after' : index = arr.indexOf(item) + 1; break ; case 'into' : arr = item[path]; if (!arr) { arr = item[path] = []; } index = arr.length; break ; } // create the new item var newItem = { header: document.getElementById( 'theInput' ).value } arr.splice(index, 0, newItem); // re-load the tree tree.loadTree(); // select the new item tree.selectedItem = newItem; tree.focus(); } } // create some data function getData() { return [ { header: 'Parent 1' , items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' }] }, { header: 'Parent 2' , items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' }] }, { header: 'Parent 3' , items: [ { header: 'Child 3.1' }] } ]; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // This file locates: "Content/css/Lesson/C1Nav/Adding.css". /* default trees on this sample */ .demo-control .wj-treeview { font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } #theInput { font-weight: normal; display: inline-block; width: 12em; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1NavController : Controller { // GET: Adding public ActionResult Adding() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < h1 > @Html .Raw(Resources.C1Nav.Adding_Title) </ h1 > < p > @Html .Raw(Resources.C1Nav.Adding_Text1) </ p > < div class = "row demo-settings" > < div class = "col-xs-5" > @Html .C1().TreeView().Id( "theTree" ) </ div > < div class = "col-xs-7" > < p > @Html .Raw(Resources.C1Nav.Adding_Text2) < input class = "form-control" id = "theInput" value = "My New Node" > </ p > < p > @Html .Raw(Resources.C1Nav.Adding_Text3) < button id = "btnBefore" class = "btn btn-default" > @Html .Raw(Resources.C1Nav.Adding_Text4)</ button > < button id = "btnAfter" class = "btn btn-default" > @Html .Raw(Resources.C1Nav.Adding_Text5)</ button > < button id = "btnInto" class = "btn btn-default" > @Html .Raw(Resources.C1Nav.Adding_Text6)</ button > </ p > </ div > </ div > |