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:

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


  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: