Skip to content

jQuery Gantt editor – SVG and Critical path

April 10, 2014

Online Demo

Download Sources

After a long period of hard work we have just released version 5.4 of our beloved project management tool Twproject, and I had finally found the time to upgrade jQuery Gantt editor.

This component is gaining lot of visibility day by day and I’d like to thank all the contributors for the precious feedback.

This new version has lots of interesting features, among which a new user interface, way cooler:


First of all, the Gantt side part has been rewritten using SVG technology, but the signatures have been preserved so that the old ugly interface can be used for old browsers (E.g: IE<9).

Having a closer look you will see how the Gantt side has been improved. (test it here:

Lots of useful changes have been added for user interactions:

1) You can drag and drop links for creating dependencies:



2) then you can select task or dependencies and delete them using keyboard.



3) Move task up, down, indent and outdent can be done using keyboard arrows.

4) Regarding the grid part, now you can move between rows and columns using keyboard.

5) Fixed header on both sides will help working with wider Gantts.

6) Gantt rescaling on windows resize events has been implemented.

7) A new button image will show/hide the critical path for the project (supported for SVG version only):



Going a little bit in depth, I have introduced a new property in the Task object for supporting readOnly at task level.

Several bugs has been solved in this version, and probably many others may have been introduced Smile.

As usual everything is MIT licensed!

Every feedback will be really appreciated.


See here for documentation:

17 Comments leave one →
  1. charge permalink
    April 12, 2014 12:58

    A great work!I find the table when the gdfResizable line can not be aligned,Please!Thanks!

  2. April 17, 2014 17:33

    Hey , i have featured this awesome jQuery plugin in

  3. May 7, 2014 04:17

    Hello, first of all , I think that your work is amazing. Currently, I am trying to use your library in rails proyect. After long time, I can’t use in apropiate way, actually I have the current errors:

    – No template found for type ‘TASKSEDITHEAD’ (In jquery.JST.js)
    – No template found for type ‘GANTBUTTONS’ (In jquery.JST.js)

    Apriciate any help to solve :D.

    Thanks in advance

  4. June 30, 2014 13:02

    You use Backflow algorithm in order to compute the critical path of a project.
    I noticed that you filter some tasks (in file ganttMaster.js, function GanttMaster.prototype.computeCriticalPath):
    > // do not consider grouping tasks
    > var tasks = this.tasks.filter(function(t) {
    > return !t.isParent();
    > });
    If a parent-task (t.isParent()==true) has dependencies (t.isDependent()==true) the Backflow algorithm will fail throwing this error “Cyclic dependency, algorithm stopped!”.
    I have got it to work just by modifying the filter condition, as follows:
    > var tasks = this.tasks.filter(function(t) {
    > return (((t.getRow() + 1) > 1) && (!t.isParent() || (t.isParent() && !t.isDependent())));
    > });

  5. Varun permalink
    September 4, 2014 12:20

    No template found for type ‘TASKSEDITHEAD’
    console.error(“No template found for type ‘” + template + “‘”);

    No template found for type ‘GANTBUTTONS’
    console.error(“No template found for type ‘” + template + “‘”);

    Unable to resolve these two error..
    any help will be appreaciated..

    • September 4, 2014 12:44

      Hi Varun,

      I tried both the online demo and the download and it works fine.

      Have you modified the code? in particular have you removed any commented lines on gantt.html file? If yes, commented lines contains the templates.
      Maybe you will find interesting this my old article on js templates:


      • Robert permalink
        September 17, 2015 13:29

        Hello! I stil have the issue around the templates. I installed the code with BOWER INSTALL and I create the chart with :
        var ge = new GanttMaster();

        I did not alter any code from the plugin. How can I solve this issue?
        And is there still support/development on this functionality?

      • September 18, 2015 11:10

        See the answer above.


  1. Twproject 5.4 | Twproject's blog
  2. Gannt editor | jQuery plugin for SVG and Critical path editor
  3. Gannt editor | Daniele Milana
  4. | Philip Büchler
  5. Twproject 5.4 now available | 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: