Get a Quote
 

Custom tree structure implementation in Rails

Posted by: C-Metric 19 Dec 2017

Requirement of the project

We were challenged to implement a unique feature which required custom tree structure with rails. The navigation on the front end side was based on the tree structure build on the back end. Each user would have a unique structure based on choices he makes on adding/modifying favorites list. On the back end side, the tree would change according to the selection from the front. The tree should have static, profile and dynamic nodes which would add other nodes based on the parent-child relationships.

 

Proposed Solution

We went through various plug-ins, made some demo and tried to implement the solution we were looking for. There were many trials and error as anyone can expect from custom solution.

For the solution of this issue, we used a JQuery based custom tree functionality. The solution provided by the plug-in was not sufficient as it did not provide dynamic node creation with various types. The modified hierarchy will affect the front end of the web application.

To fulfill the requirement for the static, profile and dynamic node we implemented profile and included fields. On the view page, the administrator can only expand and collapse the tree structure. The administrator can not only view tree structure but can also add, delete and change the position of the node. With each action, the back end database is changed via asynchronous request. The delete the function the confirmation message is displayed and after confirmation user is redirected to the view page and notification message is displayed. Similarly, the addition and relation of the node will notify user but will stay on the same page. Moreover, the implementation of CSS and style-sheet for the page was a new challenge we did not anticipate. We made a custom layout to display tree structure properly and added CSS to proper look and feel.

This indeed was a challenge for the team but we provided the efficient solution. There were many things we learned together in various situations and at the end of the project, We received the appraisal of Client.