Added tags to treeview nodes

Separated treeviewnodes from treeview
Added various methods

bbtreeview.js

@@ -40,106 +40,8 @@ BBTreeview.prototype.AddItem = function(options) {
 
   const node = a.Find(_options.ID);
 
-  // Events
+  // Setup events
-  node.Node.addEventListener("click", function(e){
+  node.SetupEvents();
-    e.stopPropagation();
-    e.preventDefault();
-
-    if (!a.isTag(e.target, "li")) {
-      return;
-    }
-
-    if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) {
-      return;
-    }
-
-    const myNode = a.getNode(e.target);
-    if (myNode == null) {
-      return;
-    }
-
-    a.Toggle(myNode);
-  });
-
-  // Setup checkbox events
-  if (a.Options.ShowCheckbox) {
-    node.GetCheckbox().addEventListener("mousedown", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // node.Checked = !node.Checked;
-
-      // a.CheckNode(node, node.Checked);
-      node.Check(!node.IsChecked());
-    });
-
-    node.GetCheckbox().addEventListener("click", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // do nothing
-    });
-
-    node.GetCheckbox().addEventListener("dblclick", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-
-      // do nothing
-    });
-  }
-
-  // node.Label.addEventListener("click", function(e){
-  //   e.stopPropagation();
-  //   e.preventDefault();
-
-  // });
-
-  // Highlighting
-  node.Container.addEventListener("mousedown", function(e){
-    e.stopPropagation();
-    e.preventDefault();
-
-    const myNode = a.getNode(e.target);
-    if (myNode == null) {
-      return;
-    }
-
-    a.Container.querySelectorAll("div.highlighted").forEach(function(e) {
-      e.classList.remove("highlighted");
-    });
-
-    // Don't show selection
-    if (!a.Options.ShowSelection) {
-      return;
-    }
-
-    myNode.Container.classList.add("highlighted");
-  });
-
-  // Toggle
-  node.Container.addEventListener("dblclick", function(e){
-    e.stopPropagation();
-    e.preventDefault();
-
-    const myNode = a.getNode(e.target);
-    if (myNode == null) {
-      return;
-    }
-
-    a.Toggle(myNode);
-  });
-
-  // Invalidate state
-  if (node.GetParentNode() != null) {
-    if (node.GetParentNode().classList.contains("c")) {
-      node.Node.classList.add("hidden");
-    } else if (node.GetParentNode().classList.contains("e")) {
-      node.Node.classList.remove("hidden");
-    } else {
-      node.GetParentNode().classList.add("e");
-      node.Node.classList.remove("hidden");
-    }
-  }
 
   return true;
 };
@@ -154,22 +56,9 @@ BBTreeview.prototype.Remove = function(id) {
 
   node.Remove();
 
-  // node.Node.parentNode.removeChild(node.Node);
-
-  // if (node.GetParentNode() != null) {
-  //   if (node.GetParentNode().classList.contains("e")) {
-  //     node.GetParentNode().classList.remove("e");
-  //   }
-
-  //   if (node.GetParentNode().classList.contains("c")) {
-  //     node.GetParentNode().classList.remove("c");
-  //   }
-  // }
-
   return true;
 };
 
-
 BBTreeview.prototype.Default = function() {
   return {
     TreeviewOptions: {
@@ -182,75 +71,52 @@ BBTreeview.prototype.Default = function() {
       ParentID: null,
       Name: "",
       Hint: "",
-      Value: "hello",
+      Value: "",
       Icon: "folder",
-      Checked: false
+      Checked: false,
+      Tag: null
     }
   };
 };
 
-
-// BBTreeview.prototype.CheckNode = function(node, value) {
-//   const a = this;
-
-//   a.setNodeCheckbox(node.Node, value);
-
-//   // Update children
-//   node.Node.querySelectorAll("li").forEach(function(e) {
-//     a.setNodeCheckbox(e, value);
-//   });
-
-//   // Invalidate ParentNode
-//   // node.ParentNode = a.GetParentNode(node.Node);
-
-//   // Update parent state
-//   if (node.GetParentNode() != null) {
-//     let uncheckedCount = 0;
-//     node.GetParentNode().querySelectorAll("li").forEach(function(e) {
-//       if (e.classList.contains("x")) {
-//         return;
-//       }
-
-//       uncheckedCount++;
-//     });
-
-//     a.setNodeCheckbox(node.GetParentNode(), (uncheckedCount <= 0));
-//   }
-// };
-
 BBTreeview.prototype.Clear = function() {
   const a = this;
 
   a.initialise(a.Options);
 };
 
-// BBTreeview.prototype.CollapseNode = function(node) {
+BBTreeview.prototype.CollapseAll = function() {
-//   const a = this;
+  const a = this;
 
-//   node.Node.classList.remove("e");
+  a.GetAllNodes().forEach(function(e) {
-//   node.Node.classList.add("c");
+    e.Collapse();
+  });
+};
 
-//   a.GetChildNodes(node.Node).forEach(function(e) {
+BBTreeview.prototype.ExpandAll = function() {
-//     e.classList.add("hidden");
+  const a = this;
-//   });
-// };
 
-// BBTreeview.prototype.ExpandNode = function(node) {
+  a.GetAllNodes().forEach(function(e) {
-//   const a = this;
+    e.Expand();
+  });
+};
 
-//   node.Node.classList.remove("c");
+BBTreeview.prototype.CheckAll = function(value) {
-//   node.Node.classList.add("e");
+  const a = this;
 
-//   a.GetChildNodes(node.Node).forEach(function(e) {
+  if (!a.Options.ShowCheckbox) {
-//     e.classList.remove("hidden");
+    return;
-//   });
+  }
-// };
+
+  a.GetAllNodes().forEach(function(e) {
+    e.Check(value);
+  });
+};
 
 BBTreeview.prototype.Find = function(id) {
   const a = this;
 
   const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
-
   if (node.length <= 0) {
     return null;
   }
@@ -258,76 +124,107 @@ BBTreeview.prototype.Find = function(id) {
   let treenode = new BBTreeviewNode(this);
   treenode.Load(node[0]);
 
-  console.log(treenode);
+  // console.log(treenode);
 
   return treenode;
-
-  // let response = {
-  //   ID: id,
-  //   Node: node[0],
-  //   ParentNode: a.GetParentNode(node[0]),
-  //   ChildNode: a.getChildNode(node[0]),
-  //   Container: node[0].querySelectorAll("div.li")[0],
-  //   Label: node[0].querySelectorAll("span")[0],
-  //   Checked: node[0].classList.contains("x"),
-  //   Checkbox: (a.Options.ShowCheckbox ? node[0].querySelectorAll("div.icon.checkbox")[0] : null),
-  //   Value: node[0].getAttribute("data-bbtv-value")
-  // };
-
-  // // console.log(response);
-
-  // return response;
 };
 
-// BBTreeview.prototype.GetChildNodes = function(node) {
+BBTreeview.prototype.FindByName = function(value) {
-//   const a = this;
-
-//   const childNode = a.getChildNode(node);
-//   if (childNode == null) {
-//     return [];
-//   }
-
-//   let nodes = childNode.querySelectorAll("li");
-//   if (nodes.length <= 0) {
-//     return [];
-//   }
-
-//   let result = [];
-//   nodes.forEach(function(e) {
-//     if (typeof(e.parentNode) == "undefined") {
-//       return;
-//     }
-
-//     if (e.parentNode != childNode) {
-//       return;
-//     }
-
-//     result.push(e);
-//   });
-
-//   return result;
-// };
-
-// BBTreeview.prototype.GetParentNode = function(node) {
-//   const a = this;
-
-//   return a.parentsUntilTagName(node, "li");
-// };
-
-BBTreeview.prototype.Toggle = function(node) {
   const a = this;
 
-  if (node.Node.classList.contains("c")) {
+  let response = [];
-    // a.ExpandNode(node);
+  a.GetAllNodes().forEach(function(e) {
-    node.Expand();
+    if (e.Name != value) {
-  } else if (node.Node.classList.contains("e")) {
+      return;
-    // a.CollapseNode(node);
-    node.Collapse();
-  } else {
-    // do nothing
     }
+
+    response.push(e);
+  });
+
+  return response;
 };
 
+BBTreeview.prototype.FindByValue = function(value) {
+  const a = this;
+
+  let response = [];
+  a.GetAllNodes().forEach(function(e) {
+    if (e.Value != value) {
+      return;
+    }
+
+    response.push(e);
+  });
+
+  return response;
+};
+
+BBTreeview.prototype.GetAllNodes = function() {
+  const a = this;
+
+  const node = a.Container.querySelectorAll("li");
+  if (node.length <= 0) {
+    return [];
+  }
+
+  let response = [];
+  node.forEach(function(e) {
+    const id = e.getAttribute("data-bbtv-id");
+    if (a.isNullOrWhitespace(id)) {
+      return;
+    }
+
+    const myNode = a.Find(id);
+    if (myNode == null) {
+      return;
+    }
+
+    response.push(myNode);
+  });
+
+  return response;
+};
+
+BBTreeview.prototype.GetCheckedNodes = function() {
+  const a = this;
+
+  let response = [];
+  a.GetAllNodes().forEach(function(e) {
+    if (!e.Checked) {
+      return;
+    }
+
+    response.push(e);
+  });
+
+  return response;
+};
+
+BBTreeview.prototype.GetCheckedValues = function() {
+  const a = this;
+
+  let response = [];
+  a.GetCheckedNodes().map(function(e) {
+    response.push(e.Value);
+  });
+
+  return response;
+};
+
+BBTreeview.prototype.GetSelectedNode = function() {
+  const a = this;
+
+  let response = null;
+  a.GetAllNodes().forEach(function(e) {
+    if (e.Highlighted) {
+      response = e;
+
+      return false;
+    }
+  });
+
+  return response;
+};
 
 BBTreeview.prototype.initialise = function(options) {
   var a = this;
@@ -368,7 +265,12 @@ BBTreeview.prototype.generateID = function() {
 BBTreeview.prototype.generateNodeHtml = function(options) {
   const a = this;
 
-  let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
+  let tag = "";
+  if (!a.isNullOrWhitespace(options.Tag)) {
+    tag = encodeURIComponent(JSON.stringify(options.Tag));
+  }
+
+  let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '" data-bbtv-tag="' + tag + '">';
   html += '<div class="li">'
 
   if (a.Options.ShowCheckbox) {
@@ -384,17 +286,6 @@ BBTreeview.prototype.generateNodeHtml = function(options) {
   return html;
 };
 
-// BBTreeview.prototype.getChildNode = function(node) {
-//   const a = this;
-
-//   let result = node.querySelectorAll("ul");
-//   if (result.length <= 0) {
-//     return null;
-//   }
-
-//   return result[0];
-// };
-
 BBTreeview.prototype.getNode = function(el) {
   const a = this;
 
@@ -418,10 +309,15 @@ BBTreeview.prototype.getOptions = function(options) {
   const a = this;
 
   let _options = Object.assign(a.Default().TreeNodeOptions, options);
+
   if (_options.ID == null) {
     _options.ID = a.generateID();
   }
 
+  if (_options.Tag == null) {
+    _options.Tag = "";
+  }
+
   return _options;
 };
 
@@ -434,7 +330,7 @@ BBTreeview.prototype.isNullOrWhitespace = function(value) {
     return true;
   }
 
-  return (value.trim().length <= 0);
+  return (value.toString().trim().length <= 0);
 };
 
 BBTreeview.prototype.isTag = function(el, tagName) {
@@ -447,6 +343,10 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
   let node = el;
 
   while (true) {
+    if (typeof(node.parentNode) == "undefined") {
+      break;
+    }
+
     node = node.parentNode;
 
     if (typeof(node) == "undefined") {
@@ -466,236 +366,3 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
 
   return node;
 };
-
-// BBTreeview.prototype.setNodeCheckbox = function(el, value) {
-//   const a = this;
-
-//   if (value) {
-//     if (!el.classList.contains("x")) {
-//       el.classList.add("x");
-//     }
-//   } else {
-//     if (el.classList.contains("x")) {
-//       el.classList.remove("x");
-//     }
-//   }
-// };
-
-
-
-
-
-
-function BBTreeviewNode(treeview)
-{
-  const a = this;
-
-  a.Treeview = treeview;
-
-  a.initialise();
-};
-
-BBTreeviewNode.prototype.Load = function(node) {
-  const a = this;
-
-  a.ID = node.getAttribute("data-bbtv-id");
-  a.Node = node;
-
-  // a.ParentNode: a.GetParentNode(node[0]);
-  // a.ChildNode: a.getChildNode(node[0]);
-
-  a.Container = node.querySelectorAll("div.li")[0];
-  a.Label = node.querySelectorAll("span")[0];
-  // a.Checked = a.IsChecked();
-  // a.Checkbox = a.GetCheckbox();
-  a.Value = node.getAttribute("data-bbtv-value");
-};
-
-
-BBTreeviewNode.prototype.Check = function(value) {
-  const a = this;
-
-  a.setCheckbox(a.Node, value);
-
-  // Update children
-  a.Node.querySelectorAll("li").forEach(function(e) {
-    a.setCheckbox(e, value);
-  });
-
-  // Update parent state
-  if (a.GetParentNode() != null) {
-    let uncheckedCount = 0;
-    a.GetParentNode().querySelectorAll("li").forEach(function(e) {
-      if (e.classList.contains("x")) {
-        return;
-      }
-
-      uncheckedCount++;
-    });
-
-    a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
-  }
-};
-
-BBTreeviewNode.prototype.Collapse = function() {
-  const a = this;
-
-  a.Node.classList.remove("e");
-  a.Node.classList.add("c");
-
-  a.GetChildNodes().forEach(function(e) {
-    e.classList.add("hidden");
-  });
-};
-
-BBTreeviewNode.prototype.Expand = function() {
-  const a = this;
-
-  a.Node.classList.remove("c");
-  a.Node.classList.add("e");
-
-  a.GetChildNodes().forEach(function(e) {
-    e.classList.remove("hidden");
-  });
-};
-
-BBTreeviewNode.prototype.GetCheckbox = function() {
-  const a = this;
-
-  if (!a.Treeview.Options.ShowCheckbox) {
-    return null;
-  }
-
-  const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
-  if (typeof(checkboxes) == "undefined") {
-    return null;
-  }
-
-  return checkboxes[0];
-};
-
-BBTreeviewNode.prototype.GetChildNode = function() {
-  const a = this;
-
-  let result = a.Node.querySelectorAll("ul");
-  if (result.length <= 0) {
-    return null;
-  }
-
-  return result[0];
-};
-
-BBTreeviewNode.prototype.GetChildNodes = function() {
-  const a = this;
-
-  const childNode = a.GetChildNode();
-  if (childNode == null) {
-    return [];
-  }
-
-  let nodes = childNode.querySelectorAll("li");
-  if (nodes.length <= 0) {
-    return [];
-  }
-
-  let result = [];
-  nodes.forEach(function(e) {
-    if (typeof(e.parentNode) == "undefined") {
-      return;
-    }
-
-    if (e.parentNode != childNode) {
-      return;
-    }
-
-    result.push(e);
-  });
-
-  return result;
-};
-
-BBTreeviewNode.prototype.GetParentNode = function() {
-  const a = this;
-
-  return a.parentsUntilTagName(a.Node, "li");
-};
-
-BBTreeviewNode.prototype.IsChecked = function() {
-  const a = this;
-
-  if (!a.Treeview.Options.ShowCheckbox) {
-    return false;
-  }
-
-  return a.Node.classList.contains("x");
-};
-
-BBTreeviewNode.prototype.Remove = function() {
-  const a = this;
-
-  if (a.GetParentNode() != null) {
-    if (a.GetParentNode().classList.contains("e")) {
-      a.GetParentNode().classList.remove("e");
-    }
-
-    if (a.GetParentNode().classList.contains("c")) {
-      a.GetParentNode().classList.remove("c");
-    }
-  }
-
-  a.Node.parentNode.removeChild(a.Node);
-};
-
-BBTreeviewNode.prototype.initialise = function() {
-  const a = this;
-
-  a.ID = null;
-  a.ParentID = null;
-  a.Name = "";
-  a.Hint = "";
-  a.Value = "";
-  a.Icon = "folder";
-  a.Checked = false;
-};
-
-BBTreeviewNode.prototype.isTag = function(el, tagName) {
-  return (el.tagName.toLowerCase() == tagName);
-};
-
-BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
-  const a = this;
-
-  let node = el;
-
-  while (true) {
-    node = node.parentNode;
-
-    if (typeof(node) == "undefined") {
-      break;
-    }
-
-    if (a.isTag(node, "ul")) {
-      if (node.classList.contains("bbtreeview")) {
-        return null;
-      }
-    }
-
-    if (a.isTag(node, tagName)) {
-      break;
-    }
-  }
-
-  return node;
-};
-
-BBTreeviewNode.prototype.setCheckbox = function(el, value) {
-  if (value) {
-    if (!el.classList.contains("x")) {
-      el.classList.add("x");
-    }
-  } else {
-    if (el.classList.contains("x")) {
-      el.classList.remove("x");
-    }
-  }
-};

bbtreeviewnode.js

@@ -2,3 +2,387 @@
  * BBTreeview
  * @version v0.1.0.223 (2023/09/08 2027)
  */
+function BBTreeviewNode(treeview)
+{
+  const a = this;
+
+  a.Treeview = treeview;
+
+  a.initialise();
+};
+
+
+BBTreeviewNode.prototype.Load = function(node) {
+  const a = this;
+
+  a.ID = node.getAttribute("data-bbtv-id");
+  a.Node = node;
+
+  a.Container = node.querySelectorAll("div.li")[0];
+  a.Label = node.querySelectorAll("span")[0];
+  a.Value = node.getAttribute("data-bbtv-value");
+
+  a.Name = a.Label.textContent;
+  a.Hint = a.Label.getAttribute("title");
+
+  a.ParentID = a.GetParentID();
+  a.Checked = a.IsChecked();
+  a.Highlighted = a.IsHighlighted();
+  a.Tag = a.GetTag();
+};
+
+
+BBTreeviewNode.prototype.Check = function(value) {
+  const a = this;
+
+  a.setCheckbox(a.Node, value);
+
+  // Update children
+  a.Node.querySelectorAll("li").forEach(function(e) {
+    a.setCheckbox(e, value);
+  });
+
+  // Update parent state
+  if (a.GetParentNode() != null) {
+    let uncheckedCount = 0;
+    a.GetParentNode().querySelectorAll("li").forEach(function(e) {
+      if (e.classList.contains("x")) {
+        return;
+      }
+
+      uncheckedCount++;
+    });
+
+    a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
+  }
+};
+
+BBTreeviewNode.prototype.Collapse = function() {
+  const a = this;
+
+  if (a.Node.classList.contains("e")) {
+    a.Node.classList.remove("e");
+    a.Node.classList.add("c");
+  }
+
+  a.GetChildNodes().forEach(function(e) {
+    e.classList.add("hidden");
+  });
+};
+
+BBTreeviewNode.prototype.Expand = function() {
+  const a = this;
+
+  if (a.Node.classList.contains("c")) {
+    a.Node.classList.remove("c");
+    a.Node.classList.add("e");
+  }
+
+  a.GetChildNodes().forEach(function(e) {
+    e.classList.remove("hidden");
+  });
+};
+
+BBTreeviewNode.prototype.GetCheckbox = function() {
+  const a = this;
+
+  if (!a.Treeview.Options.ShowCheckbox) {
+    return null;
+  }
+
+  const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
+  if (typeof(checkboxes) == "undefined") {
+    return null;
+  }
+
+  return checkboxes[0];
+};
+
+BBTreeviewNode.prototype.GetChildNode = function() {
+  const a = this;
+
+  let result = a.Node.querySelectorAll("ul");
+  if (result.length <= 0) {
+    return null;
+  }
+
+  return result[0];
+};
+
+BBTreeviewNode.prototype.GetChildNodes = function() {
+  const a = this;
+
+  const childNode = a.GetChildNode();
+  if (childNode == null) {
+    return [];
+  }
+
+  let nodes = childNode.querySelectorAll("li");
+  if (nodes.length <= 0) {
+    return [];
+  }
+
+  let result = [];
+  nodes.forEach(function(e) {
+    if (typeof(e.parentNode) == "undefined") {
+      return;
+    }
+
+    if (e.parentNode != childNode) {
+      return;
+    }
+
+    result.push(e);
+  });
+
+  return result;
+};
+
+BBTreeviewNode.prototype.GetTag = function() {
+  const a = this;
+
+  let tag = a.Node.getAttribute("data-bbtv-tag");
+  if (a.Treeview.isNullOrWhitespace(tag)) {
+    return null;
+  }
+
+  return JSON.parse(decodeURIComponent(tag));
+};
+BBTreeviewNode.prototype.GetParentID = function() {
+  const a = this;
+
+  const parentNode = a.GetParentNode();
+  if (parentNode == null) {
+    return null;
+  }
+
+  return parentNode.getAttribute("data-bbtv-id");
+};
+
+BBTreeviewNode.prototype.GetParentNode = function() {
+  const a = this;
+
+  return a.parentsUntilTagName(a.Node, "li");
+};
+
+BBTreeviewNode.prototype.IsChecked = function() {
+  const a = this;
+
+  if (!a.Treeview.Options.ShowCheckbox) {
+    return false;
+  }
+
+  return a.Node.classList.contains("x");
+};
+
+BBTreeviewNode.prototype.IsExpanded = function() {
+  const a = this;
+
+  if (a.Node.classList.contains("e")) {
+    return true;
+  }
+
+  if (a.Node.classList.contains("c")) {
+    return false;
+  }
+
+  return null;
+};
+
+BBTreeviewNode.prototype.IsHighlighted = function() {
+  const a = this;
+
+  return (a.Container.classList.contains("highlighted"));
+};
+
+BBTreeviewNode.prototype.Remove = function() {
+  const a = this;
+
+  if (a.GetParentNode() != null) {
+    if (a.GetParentNode().classList.contains("e")) {
+      a.GetParentNode().classList.remove("e");
+    }
+
+    if (a.GetParentNode().classList.contains("c")) {
+      a.GetParentNode().classList.remove("c");
+    }
+  }
+
+  a.Node.parentNode.removeChild(a.Node);
+};
+
+BBTreeviewNode.prototype.SetupEvents = function() {
+  const a = this;
+
+  // collapsible icon behaviour
+  a.Node.addEventListener("click", function(e){
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!a.isTag(e.target, "li")) {
+      return;
+    }
+
+    if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) {
+      return;
+    }
+
+    const myNode = a.Treeview.getNode(e.target);
+    if (myNode == null) {
+      return;
+    }
+
+    myNode.Toggle();
+  });
+
+  // collapsible label behaviour
+  a.Container.addEventListener("dblclick", function(e){
+    e.stopPropagation();
+    e.preventDefault();
+
+    const myNode = a.Treeview.getNode(e.target);
+    if (myNode == null) {
+      return;
+    }
+
+    myNode.Toggle();
+  });
+
+  // checkbox behaviour
+  if (a.Treeview.Options.ShowCheckbox) {
+    a.GetCheckbox().addEventListener("mousedown", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      a.Check(!a.IsChecked());
+    });
+
+    a.GetCheckbox().addEventListener("click", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      // do nothing
+    });
+
+    a.GetCheckbox().addEventListener("dblclick", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      // do nothing
+    });
+  }
+
+  // highlighting
+  a.Container.addEventListener("mousedown", function(e){
+    e.stopPropagation();
+    e.preventDefault();
+
+    const myNode = a.Treeview.getNode(e.target);
+    if (myNode == null) {
+      return;
+    }
+
+    a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(e) {
+      e.classList.remove("highlighted");
+    });
+
+    // Don't show selection
+    if (!a.Treeview.Options.ShowSelection) {
+      return;
+    }
+
+    myNode.Container.classList.add("highlighted");
+  });
+
+  a.invalidateCollapsible();
+};
+
+BBTreeviewNode.prototype.Toggle = function() {
+  const a = this;
+
+  switch (a.IsExpanded()) {
+    case true:
+      a.Collapse();
+      break;
+    case false:
+      a.Expand();
+      break;
+    default: break;
+  }
+};
+
+BBTreeviewNode.prototype.initialise = function() {
+  const a = this;
+
+//   a.ID = null;
+//   a.ParentID = null;
+//   a.Name = "";
+//   a.Hint = "";
+//   a.Value = "";
+//   a.Icon = "folder";
+//   a.Checked = false;
+};
+
+BBTreeviewNode.prototype.invalidateCollapsible = function() {
+  const a = this;
+
+  // Invalidate state
+  if (a.GetParentNode() == null) {
+    return;
+  }
+
+  if (a.GetParentNode().classList.contains("c")) {
+    a.Node.classList.add("hidden");
+  } else if (a.GetParentNode().classList.contains("e")) {
+    a.Node.classList.remove("hidden");
+  } else {
+    a.GetParentNode().classList.add("e");
+    a.Node.classList.remove("hidden");
+  }
+};
+
+BBTreeviewNode.prototype.isTag = function(el, tagName) {
+  return (el.tagName.toLowerCase() == tagName);
+};
+
+BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) {
+  const a = this;
+
+  let node = el;
+
+  while (true) {
+    if (typeof(node.parentNode) == "undefined") {
+      break;
+    }
+
+    node = node.parentNode;
+
+    if (typeof(node) == "undefined") {
+      break;
+    }
+
+    if (a.isTag(node, "ul")) {
+      if (node.classList.contains("bbtreeview")) {
+        return null;
+      }
+    }
+
+    if (a.isTag(node, tagName)) {
+      break;
+    }
+  }
+
+  return node;
+};
+
+BBTreeviewNode.prototype.setCheckbox = function(el, value) {
+  if (value) {
+    if (!el.classList.contains("x")) {
+      el.classList.add("x");
+    }
+  } else {
+    if (el.classList.contains("x")) {
+      el.classList.remove("x");
+    }
+  }
+};

demo-test.html

@@ -28,7 +28,7 @@
   <div class="column">
     <div class="panel">
 
-      <p>Create demo treeview with checkboxes</p>
+      <p>Create demo treeview with checkboxes and selection enabled</p>
       <button onclick="CreateTreeview()">Create Treeview</button>
 
     </div>
@@ -44,6 +44,42 @@
       <button onclick="RemoveTreeNode()">Remove Treenode</button>
 
     </div>
+    <div class="panel">
+
+      <p>Find a treenode</p>
+      <p>
+        <button onclick="FindTreeNode()">Find Treenode By ID</button>
+        <button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
+        <button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
+      </p>
+
+    </div>
+    <div class="panel">
+
+      <p>Get treenodes</p>
+      <p>
+        <button onclick="GetAllTreeNodes()">Get All Treenodes</button>
+        <button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
+        <button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
+      </p>
+      <p>
+        <button onclick="GetCheckedValues()">Get Checked Values</button>
+      </p>
+
+    </div>
+    <div class="panel">
+
+      <p>Various</p>
+      <p>
+        <button onclick="CollapseAll()">Collapse All</button>
+        <button onclick="ExpandAll()">Expand All</button>
+        <button onclick="CheckAll()">Check All</button>
+        <button onclick="UncheckAll()">Uncheck All</button>
+      </p>
+
+    </div>
+
+
 
 
   </div>
@@ -99,7 +135,8 @@ function CreateTreeview(){
       treeview1.AddItem({
       ID: "0_" + i,
       ParentID: "root",
-      Name: folders1[i]
+      Name: folders1[i],
+      Value: folders1[i]
     });
   }
 
@@ -115,7 +152,8 @@ function CreateTreeview(){
       treeview1.AddItem({
       ID: "0_2_" + i,
       ParentID: "0_2",
-      Name: folders12[i]
+      Name: folders12[i],
+      Value: folders12[i]
     });
   }
 
@@ -128,7 +166,8 @@ function CreateTreeview(){
       treeview1.AddItem({
       ID: "0_3_" + i,
       ParentID: "0_3",
-      Name: folders13[i]
+      Name: folders13[i],
+      Value: folders13[i]
     });
   }
 
@@ -142,14 +181,17 @@ function CreateTreeview(){
       treeview1.AddItem({
       ID: "0_5_" + i,
       ParentID: "0_5",
-      Name: folders15[i]
+      Name: folders15[i],
+      Value: folders15[i]
     });
   }
 
   treeview1.AddItem({
     ID: "0_2_3_0",
     ParentID: "0_2_3",
-    Name: "en-GB"
+    Name: "en-GB",
+    Value: "en-GB",
+    Tag: { test: "hello momo" }
   });
 }
 
@@ -161,6 +203,79 @@ function RemoveTreeNode() {
   treeview1.Remove("0_2");
 }
 
+function FindTreeNode() {
+  let treenode = treeview1.Find("0_5");
+
+  console.log(treenode);
+
+  alert(JSON.stringify(treenode));
+}
+
+function FindTreeNodesByName() {
+  let treenodes = treeview1.FindByName("Common Files");
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function FindTreeNodesByValue() {
+  let treenodes = treeview1.FindByValue("Internet Explorer");
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function GetSelectedTreeNode() {
+  let treenode = treeview1.GetSelectedNode();
+
+  console.log(treenode);
+
+  alert(JSON.stringify(treenode));
+}
+
+function GetCheckedTreeNodes() {
+  let treenodes = treeview1.GetCheckedNodes();
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function GetAllTreeNodes() {
+  let treenodes = treeview1.GetAllNodes();
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function GetCheckedValues() {
+  let treenodes = treeview1.GetCheckedValues();
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function CollapseAll() {
+  treeview1.CollapseAll();
+}
+
+function ExpandAll() {
+  treeview1.ExpandAll();
+}
+
+function CheckAll() {
+  treeview1.CheckAll(true);
+}
+
+function UncheckAll() {
+  treeview1.CheckAll(false);
+}
+
+
   </script>