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.
- Flat input data
- Dynamic node object properties
- Sorting by node object properties
- Searching by node object properties
- By like patterns (case sensitive/insensitive) or whole words
- By regular expressions
- Expanding to matching nodes
- Highlighting matching nodes
- Adding nodes
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.
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.
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.