Wijmo Tree : Find Node by Value

  • 0 Comments

Wijmo Tree widget is used to present items in a hierarchical tree structure. It supports expand/collapse animations, stylish themes, and drag-and-drop functionality etc. The widget has a method called findNodeByText through which we can find a node by the specified node text. But, as of now, there is no method to search any node through its value. In this blog, we will see how we can select or delete any node in WijTree based on the unique value given to the li tags.

Create a WijTree

In order to create a WijTree, we'll use the following markup and script: 

<ul id="tree">  
  <li value="100" title="Value 100"><a><span>Folder 1</span></a>  
    <ul>  
      <li value="101" title="Value 101"><a><span>Folder 1.1</span></a></li>  
      <li value="102" title="Value 102"><a><span>File 1.2</span></a></li>  
      <li value="103" title="Value 103"><a><span>File 1.3</span></a></li>  
      <li value="104" title="Value 104"><a><span>File 1.4</span></a></li>  
      <li value="105" title="Value 105"><a><span>File 1.5</span></a></li>  
    </ul>  
  </li>  
  <li value="200" title="Value 200"><a><span>Folder 2</span></a>  
    <ul>  
      <li value="201" title="Value 201"><a><span>File 2.1</span></a></li>  
      <li value="202" title="Value 202"><a><span>File 2.2</span></a></li>  
      <li value="203" title="Value 203"><a><span>File 2.3</span></a></li>  
      <li value="204" title="Value 204"><a><span>File 2.4</span></a></li>  
      <li value="205" title="Value 205"><a><span>File 2.5</span></a></li>  
    </ul>  
  </li>  
  <li value="300" title="Value 300"><a><span>Folder 3</span></a>  
    <ul>  
      <li value="301" title="Value 301"><a><span>File 3.1</span></a></li>  
      <li value="302" title="Value 302"><a><span>File 3.2</span></a></li>  
      <li value="303" title="Value 303"><a><span>File 3.3</span></a></li>  
      <li value="304" title="Value 304"><a><span>File 3.4</span></a></li>  
      <li value="305" title="Value 305"><a><span>File 3.5</span></a></li>  
    </ul>  
  </li>  
</ul>

<script type="text/javascript">  
$(document).ready(function () {  
   //make the ul list as WijTree  
    $("#tree").wijtree({ showExpandCollapse: false });  
});

Selecting a Node

The basic concept of finding a node by value is to retrieve all li tags and then, filter them based on the value entered by the end user. Once we get the li tag then you can convert it in wijtreenode and can set it selected option to true. 

//handle Select button  
$("#btnSelect").click(function (e) {  
  //get the enter value  
  var valueToSearch = $("#txtUser").val();  
  //called the custom method to select  
  SelectNodeByValue(valueToSearch);  
});  

//handle the enter key of textbox  
$("#txtUser").keyup(function (e) {  
  if (e.keyCode == 13) {  
    var valueToSearch = $("#txtUser").val();  
    SelectNodeByValue(valueToSearch)  
  }  
});  

function SelectNodeByValue(val) {  
  //get the list of li tags in WijTree  
  var li_treeNodes = $(".wijmo-wijtree-list").find('li');  

  //filter this collection on basis of entered value  
  var node = li_treeNodes.filter(function (index) {  
    return $(this).val() == val;  
  });  
  //select the retrieved node  
  $(node).wijtreenode({ selected: true });  
}

Deleting a Node

For deleting the node, we first need to get its index and find whether its a child node or parent node. If it child node then find its parent and remove it. Else, we can directly use remove method of the WijTree and pass the node index. Here is the javascript: 

//handle the delete button  
$("#btnDelete").click(function (e) {  
  var valueToSearch = $("#txtUser").val();  
  //call the custome Delete method  
  DeleteNodeByValue(valueToSearch);  
});  

function DeleteNodeByValue(val) {  
  var li_treeNodes = $(".wijmo-wijtree-list").find('li');  

  //traverse through all the li tags  
  $.each(li_treeNodes, function (index, node) {  
  if ($(node).val() == val) {  
    //get the parent of the specific node to delete  
    var parent = $(node).wijtreenode('getOwner');  
    //retrieve its index  
    var nodeIndex = $(node).index();  
    //check if its a child node  
    if (parent != null)  
      parent.element.wijtreenode("remove", nodeIndex);  
    else  
      $("#tree").wijtree("remove", nodeIndex);  
     }  
  });  
}

Download the complete sample for the implementation.

MESCIUS inc.