• Miscellaneous
  • < 1

Developing a Custom Solution to Display the JSON Response in a Tree Structure

  • POSTED ON
  • July 6, 2017
  • POSTED BY
  • Muhammad Ahmad
  • POSTED ON July 6, 2017
  • POSTED BY Muhammad Ahmad

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: 1- Tree Taxonomy 2- Context Menu 3- Drag and drop of nodes to reorder (multiple....

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:

  1. Tree Taxonomy
  2. Context Menu
  3. Drag and drop of nodes to reorder (Multiple nodes)
  4. Depth of tree up-to level 3
  5. Slow Loading Speed
  6. Search
  7. 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).

JSON Response:- 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.

ABOUT THE AUTHOR

Muhammad Ahmad

Currently serving as the SEO Manager at vteams, Ahmed is a highly skilled individual with several years of experience of Digital Marketing.

0 Comments

Leave a Reply

More Related Article
We provide tips and advice on delivering excellent customer service, engaging your customers, and building a customer-centric business.