vteam #550 was hired to work on an application that can create and manage the catalogs of auto parts/products for different manufacturers and distributors. The client asked vteams to represent the JSON response in a tree format. The tree format must achieve the following targets:
- Tree Taxonomy
- Context Menu
- Drag and drop of nodes to reorder (Multiple nodes)
- Depth of tree up-to level 3
- Slow Loading Speed
- Search
- Check-box selection
.
jsTree – A jQuery tree plugin was used initially to cater all the above mentioned targets. Reason being that this plugin provides a good and reliable tree format. It was working fine for thousands of nodes up-to level 3 depth. But this powerful plugin became slower when a user tried to move multiple nodes (more than 100 nodes).
Problem Analysis
vteams engineer Mahmood Ali analyzed the problem and tried to rectify it. But the structure of jsTree plugin by default is developed in such a way that too much space is allocated at the client side (when a user tried to move multiple nodes/more than 100 nodes). jsTree was working fine for less than 100 nodes.
Many other available options (plugins) were tried but all in vain.
Solution
After so many trials, it was decided to get rid of the external plugins as none of them was able to complete the requirement. Instead, a custom solution based on AJAX was developed to get the JSON response in a tree structure.
While developing the custom solution, Mahmood used three columns div structure (as per the target) instead of a vertical tree. Additionally, some jQuery plugins were used such as:
- contextmenu.html (for content menu)
- jquery.multisortable (for multi sorting)
.
After that, the solution was tested. It worked fine for multiple nodes.