Knockout Advanced Tree Library & Control

All code samples used on this post can be downloaded from here


This post shows you how to fully implement a tree control using knockout. It was taken into consideration while writing the code to separate the business-related code from the core implementation as far as possible without adding too much complexity to the whole solution.

You can take this library as a base which you can modify to be adapted to your needs. Feel free to do it and for sure if you have any comments or ideas I am all ears.


Supported Features

1. Flat input data
2. Dynamic node object properties
3. Sorting by node object properties
4. Searching by node object properties
1. By like patterns (case sensitive/insensitive) or whole words
2. By regular expressions
3. Expanding to matching nodes
4. Highlighting matching nodes
5. Expand/Collapse
6. Adding nodes
7. Extensibility

Note:
The demo page may take quite time to fully load and the tree to appear because I meant to load a quite number of nodes to test the tree under such conditions and not only happy scenarios. The tree in the demo will load 1230 nodes.


Note:
This post is not meant to be a knockout tutorial. It assumes that you have experience with knockout and that's why I am not going to explain every line of code. Most of the code is business irrelative and dependent except for a few lines which will be highlighted with inline comments on the code.

Note:
The tree structure and styling used in this solution is built on the jsTree plugin. jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. It has several great features but in this solution we just used its themes.

Due to the huge amount of code I will not post the code here but you have download the code from this link.
You can also check the live demo on this link.


That's it. Hope you find this useful.