(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Developing a Custom Solution to Display the JSON Response in a Tree Structure
Jul 06
developing-a-custom-solution-to-display-the-json-response-in-a-tree-structure

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

  • July 6, 2017

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).

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.

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com