Expand / Collapse in jQuery Gantt Editor

jQuery Gantt Editor has been created mainly as part of our project management solution, Teamwork.

Gantt editor is composed by three main sub parts/editors: the grid editor on the left, the Gantt editor on the right, and the detailed task editor in popup; actually the popup editor is used also for resources and assignments.

Now, Here I have implement something good for you. I have implement tasks Expand/Collapse functionality in Gantt Editor.

To implement this functionality just have some change in existing functionality.

For that fist of all add Expand/Collapse button for it in gantt.html page. I have add button in front of Name property.

Just change this segment of  <div class="__template__" type="TASKROW"> in gantt.html page.

In above image you can see how to add new button for Expand / Collapse.

Now have to change in ganttGridEditor.js.

GridEditor.prototype.refreshTaskRow() method is used to refresh all task s after perform any operation.
Here I have write code to show/ Hide expand collapse button. I task have children then have to show button for expand/Collapse otherwise hide button.

Here in above code first get descendant of task. descendantCnt will give you the number of children of task.
With use of descendantCnt show/hide expand/collpase button.

Now have implement Expand/Collase button click event in ganttGridEditor.js.

Here in above picture segment you clearly identify Expand and Collapse operation. When Click on on button it will check that if ".exp" class then task have to expand and show all their children otherwise collapse all their children.

After that I make an array for visible tasks ids. Its use for maintain root task expand collapse button.

Here I implement a new method that is : redrawExpand(). In this function I just reload graph section because whenever go for expand collapse then we cannot do any data changes. its not required to refresh task rows.

Now after change in Editor, also have to maintain Graph. We always have recreate graph. For that have to change ganttDrawer.js. The graph of editor is maintain with this js. In  creation of graph two methods is very useful that is

1. Ganttalendar.prototype.redrawTasks() : This method is use to redraw all task.
2. Ganttalendar.prototype.redrawLinks() : This method is use for redraw link of dependency of task.

Here I have make little change to perform expand collapse functionality.

1. Ganttalendar.prototype.redrawTasks() :

In above code segment I will first get visible tasks ids of editor then store it an array. With use of visible task ids I only redraw the visible task. So it will create only visible task in graph.

2. Ganttalendar.prototype.redrawLinks() :

Above segment is used to draw links of  task dependency. Here I also used visible task ids. With use of visible task id I only redraw visible task ids links.

After all this thing just comment code of redraw links in Ganttalendar.prototype.drawTask() function.

//self.redrawLinks();

So finally with change in all functionality you can perform expand collapse in jQuery Gantt Editor.

Please let me know if any thing need to be change.