Skip to content

jQuery Gantt editor – collapsible branches

May 15, 2014

Online Demo

Download Sources


I received lots of request for this feature, but I never put my hands on.

Yesterday I received a merge request from Ken “BestKen” with this feature implemented!

The feature has been developed in a really “clean” manner: thanks Ken.





This new feature is already available on the demo and on GitHub sources.

There is also a  fix for IE 9 and a better organization of images.


22 Comments leave one →
  1. May 25, 2014 14:02

    This is a great addition Roberto and Ken! I really love all of the functionality of the Gantt Editor.

    Just one little bug I’ve noticed in the expand/collapse. If a user collapses a branch the “collapsed” attribute is set to true. However, when the JSON is reloaded the branches are expanded even though the task should be collapsed. Very minor, but on a large project it could be very useful.

    Thanks again for a great editor!
    Matthew Perry

  2. June 17, 2014 10:32

    HI Roberto,

    Looks really good. Let me pass you some small issues we found (too little to go through the effort of a fork?)


    1) Button collapse over taskStatusBox.

    File gant.css: add “z-index: 100;” to taskStatusBox css.
    File platform.css: change opacity in cvcColorSquare:hover css to 1.


    Links should not work if canWrite=false.

    File ganttDrawerSVG.js: add canWrite condition to drawTask function when both mouseenter and mouseleave event.

    3) Links and tasks should not be removable if canWrite=false.

    File ganttMaster.js: add canWrite condition to init function when both del and backspace keydown event.

  3. June 29, 2014 23:34


    I want to implement jQueryGantt, using the fatfree framework to generate the task list. Is it possible to tune into an hourly basis, lets say with a resulution of 0.25 h ?. As it is now 1 day is minimum. I think I read some where there has been a fork somewhere who has made it, but I cant find that particular fork.

    Best regards

    Lars Brandi Jensen

  4. October 10, 2014 14:47

    This is the perfect one which I am looking for. I really love the functionality and do appreciate your efforts.

    I’ve got one question for you. I don’t want to use the GridEditor (left part of the editor). Is it an easy job to completely eliminate left part from this control as it seems highly coupled in code?

    • October 10, 2014 15:39

      This component was created mainly for editing Gantt, this is why the grid is so tightly coupled.
      I think is not impossible, but there are lots of line to remove.
      Probably you could try to apply a css to hide everything :-)

  5. October 27, 2014 13:16

    Is it a bug or feature not implemented?

    When we change the duration or end-date of any task, the parent tasks also adjust their dates if the changed date of task is greater than the date of parent tasks.

    But it doesn’t change/adjust the dates of parent tasks if the changed date of child task is less than the parent tasks.

    Microsoft project tool adjust dates in both cases.

    I hope you understand my point.

    • October 28, 2014 10:09

      This is not a “bug” is a “feature”.
      In Twproject you can have a root task larger than the critical path. Just in case shit happen :-)

  6. October 31, 2014 04:04

    Hi, Roberto.. I am building an apps on windows 8 for tablet pc, I used dhtmlx before. My question, is it support for touch control on windows 8 tablet pc?

    • October 31, 2014 10:28

      Currently not.
      But it should not be a big deal, just re-mapping few events you will get the mobile version.
      It will be nice if you would contribute on such matter.

  7. December 1, 2014 22:14

    exports does not work. Please tell me how I can fix it or where I can download the gimmeBack.jsp, could send that file to my email?…help me

    • December 2, 2014 10:34

      This component don’t have any server-side integration ready-to-use, you have to develop your one depending on your language (java,php,C#,python, ruby, etc.) and framework.
      The function saveGanttOnServer and saveInLocalStorage get a serialized version of your project you can store somerwhere.

  8. Shivi permalink
    May 13, 2015 11:18

    Is it possible to do paging in this control. As if data is huge as 3000 records, Gantt takes time to populate. Please suggest if any solution for this.

    • May 13, 2015 11:37

      The easiest way is to page data using a server-side integration (actually I did it) with a low effort.
      Consider that you could have dependencies from task displayed in different pages….. a nightmare :-(

  9. Eric Albers permalink
    June 3, 2015 01:46

    Hey Great project!
    Is there a call to resize the chart when the Div element it sits in is resized?
    I’m trying to get it to work in qooxdoo windows, (I have it rendering, but when I reize the windows the chart does not resize)


    • June 3, 2015 10:51

      You should listen for the window resize message and trigger “resize.gantt” event to the workSpace

      • Eric permalink
        June 3, 2015 15:07

        Thank you Roberto,

        The resize trigger would not work properly for me, as the div for the this.element.width is not yet updated to its new value.

        I wrote 2 functions and added them to your code and it fixed the issue….

        in ganttMaster.js I made a resizep (resize with parameters)
        GanttMaster.prototype.resizep = function(width,height)

        Then in ganttUtilities.js I made a new resizep also….

        var totW=width; //this.element.width();
        var realW=this.firstBox.get(0).scrollWidth;
        var newW=totW*this.perc/100;
        this.secondBox.css({left:newW + this.splitterBar.width(),width:totW – newW – this.splitterBar.width()});

        Which allows me to call resize directly and give it the width and height to use, as I know in advance of the div's style being updated.

        I call it with


        Thanks again!

      • June 25, 2015 08:53

        Hi Eric,

        you could insert this code directly on GitHub.

  10. Sam permalink
    June 23, 2015 20:29

    Hi Roberto,

    I am running into an issue when applying the current version of boostrap. Once I add bootstrap to the html, the text on the right of my gantt chart no longer appears. I was wondering if you have seen this issue with bootstrap compatibility before?


    • June 25, 2015 08:52

      Hi Sam,
      never tried with bootstrap.
      You have to debug it :-)

    • mrdanielmitchell permalink
      November 28, 2015 18:13

      It does work with bootstrap. But you need to override one of the css styles:

      /* Prevent bootstrap styles hiding task names and dragable circles for dependencies. */
      svg:not(:root) {
      overflow: visible;

  11. Paulo permalink
    August 3, 2015 21:31

    Hi Roberto, I’m trying to use modal of bootstrap to replace TASK_EDITOR (template and createBlackPage), but when I save in my modal is updated together others rows edited before.

    I’m changing:
    //var taskEditor = $.JST.createFromTemplate({}, “TASK_EDITOR”);
    var taskEditor = $(‘#modal’);

    //var ndo = createBlackPage(800, 500).append(taskEditor);

    As I said, I can edit and a row is updated, but if I edit other tasks, the previous edited rows end up being updated together, as if it was in memory, as a stack. How could I solve this? Sorry about my English.


  1. Twproject 5.5 release: Project reporting, collapsible Gantt and more | Twproject's blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: