jQuery Gantt editor
Online Demo |
Download Sources |
As promised in my last post, here I will try to explain how to use our jQuery Gantt editor, how it works and how to customize it for your needs.
First let me list its key features:
- jQuery based
- MIT licensed: you can reuse it everywhere
- json import-export
- internationalizable
- manage task statuses –> sort of workflow handling
- manage dependecies
- manage assignements (resources, roles, efforts)
- server synchronization ready
- full undo-redo support
- cross browser (at least for recent versions)
Source codes are available on GitHub here: https://github.com/robicch/jQueryGantt
In order to better understand this component I will introduce some concepts below.
Genesis
This editor has been created mainly as part of our project management solution, Teamwork.
During the development we always kept in mind creating an open-source reusable “component”, while the focus was integration with Teamwork. This constraint gave us the opportunity to extend the standard Gantt behaviour by introducing key features like task’s statuses, or time buffers for parent tasks.
This is not the right place to discuss how these features make project modelling and management more flexible and closer to the real world: if you want go deeper have a look at Teamwork user guide.
If Teamwork’s model influenced the behavior of the editor, the environment where Teamwork lives (Java Jsp Html5 jQuery internationalized server side multi-db cross-operating-system etc.) influenced the packaging and the libraries of our editor; this is the reason for so many dependencies.
Despite this facts, our Gantt editor can be easily customized and extended as Javascript component.
Main concepts
While a Gantt viewer (hence read-only) can be easily packed as a single component, a Gantt editor is a way more complicated object; so I prefer to think of it as jQuery application and not just as a plugin.
Actually our 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.
The goal of our editor is to generate a json file representing the full project state that could be sent to a server to store it. During editing there is no interaction with the server.
The distributed version uses local storage to save the project status, but examples of server calls are available in the source code.
How to use it
Download the component source code here, unzip the file: the “gantt.html” is already a working Gantt editor. If you open “gantt.html” with your preferred html editor: the source contains some comments so it should be readable 
.
To play with the code use Firefox with Firebug plugin installed or Chrome (as I do).
In the code first we defined a global variable for accessing the editor, called “ge”.
In your browser try to change something on the gantt and then from your js debugger execute
ge.saveProject()
This method returns the project in form of a json object. In the demo page we use local storage for saving the project (or a textarea if local storage is not available), but in a real environment you probably will need to send data to a server. I left a commented code for ajax communication with the server.
In order to load a project you must obviously supply a json object in the same format that has been saved on the server:
ge.loadProject( [yourJsonProject] )
The same json object can be used both ways: load or save, and in consequence client-to-server or server-to-client.
Project data structure
This is a project json object structure:
{
tasks:[…]
resources: […]
roles: […]
… more
}
here tasks, resources and roles are arrays.
As it easy to guess, the “tasks” array contains a list of task in the Gantt, and this is the most relevant data to manage.
“Resources” and “roles” will be easy to understand by looking first to a task element in the “tasks” array:
{
“id”:”tmp_fk1345562123031″,
“name”:”approval”,
“code”:”APP”,
“level”:2,
“status”:”STATUS_SUSPENDED”,
“start”:1348696800000,
“duration”:10,
“end”:1349906399999,
“startIsMilestone”:false,
“endIsMilestone”:false,
“assigs”:[…],
“depends”:”7:3,8″,
“description”:”Approval of testing”,
“progress”:20
}
First important consideration: the order of tasks in the array is the same of the editor. The index of the array is used as reference for dependencies.
Attributes like name, code and description require no explanation, but some do:
- id: used to synch data with the server. If the id is supplied by the server it will untouched. Tasks created client side will acquire a temporary id starting with “tmp_”
- level: it is the depth (the indentation) of a task in the Gantt structure. The root task is at level 0 (zero), its children at level 1 (one) and so on. Levels must be consistent with the project structure: you can’t have a task of level n+1 if you don’t have a task of level n above on the array
- start, end: are expressed in milliseconds. “start” is set to the first millisecond of the day, “end” is set to the last millisecond of the day.
- duration: is always in working days. If there are holidays on the calendar (see below for holydays configuration) the end date will take it into account. Actually the end date is always recomputed using “start” and “duration”, and it is supplied for comfort
- startIsMilestone, endIsMilestone: booleans. Once set to true, task’ start/end can’t move accidentally. You always can change dates directly on the task, but not by acting on children or predecessors.
- depends: a string comma delimited containing indexes of tasks on which this task depends. Multiple dependencies are supported. Only the finish-to-start dependency type is supported (other types can be workarounded by introducing intermediary brother tasks or children). It is possible to specify a “lag” in days by using a “:”. E.g.: 7:3,8 means that the task will start 3 days after task 7 is completed and task 8 is completed.
- status: this is a string representing the status of the task. Allowed statuses are: STATUS_ACTIVE, STATUS_DONE, STATUS_FAILED, STATUS_SUSPENDED, STATUS_UNDEFINED. As stated before, task statuses allow to use your project like a sort of workflow: e.g.: if “task b” depends on “task a”, “task b” will remain in “STATUS_SUSPENDED” until “task a” will pass from “STATUS_ACTIVE” to “STATUS_DONE”. For the complete status transition rules see below.
- progress: a number that specifies progress: 0% none 50% half way and so on. For Teamwork in some case 123% can be a meaningful value for progress, so there are no constraints.
- assigs: array of assignment. Each assignment has the following structure:
{
“resourceId”:”tmp_1″,
“id”:”tmp_1345560373990″,
“roleId”:”tmp_1″,
“effort”:36000000
}
mainly assignments are structured for carrying server-side data:
- resourceId: is the unique id for the resource. Refers to the “resources” array
- id: is the unique identifier of this assignment
- roleId: is the unique identifier of this assignment. Refers to the “roles” array
- effort: is the estimated effort in milliseconds
The “resources” array contains elements in the following form:
{
“id”:”tmp_1″,
“name”:”Resource 1″
}
The “roles” array contains elements in the following form:
{
“id”:”tmp_1″,
“name”:”Project Manager”
}
You must remember that this editor is the client part of something that manages persistence, alerts, interaction with other systems server-side; so we have to handle a few more attributes:
deletedTaskIds:[…]
selectedRow: 7
canWrite: true
canWriteOnParent: true
minEditableDate:1349906300000
maxEditableDate:3499063999999
where
- deletedTaskIds: is an array containing the ids of the tasks removed client side. Only tasks with a “real” id will be notified to the server (so not those starting with “tmp_”), locally generated ones will be removed silently.
- selectedRow: is the line currently in edit
- canWrite: is a boolean stating if you have permission to write/change/create/delete tasks on this project or not. Set it to true for a basic usage.
- canWriteOnParent: this is a little bit obscure. It is used in case you are editing only a small part of a complex project. For instance you are a PM of sub-task but not of the top-project: maybe some changes you made on dates may affect the top-project schedule.
Setting this boolean to false you will stop propagation to top project/s. Set it to true for a basic usage. - minEditableDate, maxEditableDate: are the boundaries used in case you can’t write on parent
Here is an example a the project json object:
{
"tasks":[
{
"id":"tmp_fk1345624806538",
"name":"Gantt editor ",
"code":"",
"level":0,
"status":"STATUS_ACTIVE",
"start":1346623200000,
"duration":5,
"end":1347055199999,
"startIsMilestone":false,
"endIsMilestone":false,
"assigs":[
{
"resourceId":"tmp_3",
"id":"tmp_1345625008213",
"roleId":"tmp_1",
"effort":7200000
}
],
"depends":"",
"description":"",
"progress":0
},
{
"id":"tmp_fk1345624806539",
"name":"phase 1",
"code":"",
"level":1,
"status":"STATUS_ACTIVE",
"start":1346623200000,
"duration":2,
"end":1346795999999,
"startIsMilestone":false,
"endIsMilestone":false,
"assigs":[
{
"resourceId":"tmp_1",
"id":"tmp_1345624980735",
"roleId":"tmp_1",
"effort":36000000
}
],
"depends":"",
"description":"",
"progress":0
},
{
"id":"tmp_fk1345624789530",
"name":"phase 2",
"code":"",
"level":1,
"status":"STATUS_SUSPENDED",
"start":1346796000000,
"duration":3,
"end":1347055199999,
"startIsMilestone":false,
"endIsMilestone":false,
"assigs":[
{
"resourceId":"tmp_2",
"id":"tmp_1345624993405",
"roleId":"tmp_2",
"effort":36000000
}
],
"depends":"2",
"description":"",
"progress":0
}
],
"resources":[
{
"id":"tmp_1",
"name":"Resource 1"
},
{
"id":"tmp_2",
"name":"Resource 2"
},
{
"id":"tmp_3",
"name":"Resource 3"
}
],"roles":[
{
"id":"tmp_1",
"name":"Project Manager"
},
{
"id":"tmp_2",
"name":"Worker"
}
],
"canWrite":true,
"canWriteOnParent":true,
"selectedRow":0,
"deletedTaskIds":[],
}
Status transition rules (aka project workflow)
Task statuses are a key feature of Teamwork, and our Gantt editor supports them in full.
Use the demo page and try to close some tasks (change status to “completed”); you will see how dependent tasks/children will change their status according to the following rules:
- any status-> STATUS_DONE: may activate dependent tasks, both suspended and undefined. Will set to done all descendants.
- STATUS_FAILED -> STATUS_DONE: do nothing if not forced by hand.
- STATUS_UNDEFINED -> STATUS_ACTIVE: all children become active, if they have no dependencies.
- STATUS_SUSPENDED -> STATUS_ACTIVE : sets to active all children and their descendants that have no inhibiting dependencies.
- STATUS_DONE -> STATUS_ACTIVE: all those that have dependencies must be set to suspended.
- STATUS_FAILED -> STATUS_ACTIVE: nothing happens: child statuses must be reset by hand.
- any status-> STATUS_SUSPENDED: all active children and their active descendants become suspended. when not failed or forced
- any status-> STATUS_UNDEFINED: all active children and their active descendants become suspended. when not failed or forced.
- any status-> STATUS_FAILED: children and dependants are set to failed.
A basic minimal implementation
The demo example is quite simple and commented, it should the right point to start.
Here I’ll sum-up what you’ll need to use our Gantt editor in your application:
first include javascript dependencies
<script src="/jquery/1.7/jquery.min.js"></script> <script src="/jquery-ui.min.js"></script> <script src="libs/jquery.livequery.min.js"></script> <script src="libs/jquery.timers.js"></script> <script src="libs/platform.js"></script> <script src="libs/date.js"></script> <script src="libs/i18nJs.js"></script> <script src="libs/dateField/jquery.dateField.js"></script> <script src="libs/JST/jquery.JST.js"></script> <script src="ganttUtilities.js"></script> <script src="ganttTask.js"></script> <script src="ganttDrawer.js"></script> <script src="ganttGridEditor.js"></script> <script src="ganttMaster.js"></script>
then some css
<link rel=stylesheet href="platform.css" type="text/css"> <link rel=stylesheet href="libs/dateField/jquery.dateField.css" type="text/css"> <link rel=stylesheet href="gantt.css" type="text/css">
then you need a div where to place the editor, something like:
<div id="workSpace" style="padding:0px; overflow-y:auto; overflow-x:hidden; border:1px solid #e5e5e5; position:relative; margin:0 5px; width:1024px; height:800px;"></div>
now create the Gant editor and bind it to your div
var ge = new GanttMaster();
ge.init($("#workSpace"));
your editor its ready to use.
If you want to know how our Gantt editor works, go in depth by reading next chapter…
How it is built
Environment first!
Libraries
Our Gantt editor is based on jQuery and use some jQuery UI components like draggable, sortable etc.
Other jQuery related libraries are used here like livequery and timers.
For data selection I used one of my components (I have not yet published it but I will…; anyway its included here):
It supports date shortcuts like “t” (today), “y” (yesterday), “lm” (last month), “lq” (last quarter), “-4w” (4 week ago) and so on. See files on “/libs/dateField” folder for details. This component is MIT licensed so use it!
Another key component is a javascript template library called “JST” that I wrote some years ago and discussed in a previous post “Easy going JavaScript templates”.
It is used for creating editor side rows and Gantt task elements. The library is in “/libs/JST” folder; it is very powerful and I used it in several products.
Our Gantt editor uses extensively date computation and formatting.
I used Matt Kruse’s date library with some extensions for managing holidays in date computation and with some changes for more comprehensive support of Java date formats and internationalization.
Our Gantt editor supports internationalization, but only English is implemented. Have a look at “/libs/i18n.js” file. Here you will find all the internationalization defaults, including the definition of a sample holidays calendar.
The last library used is “/libs/platform.js” that is a sort of toolbox for input validation, feedback management, extension of js objects (String, Array, Date) for cross-browser compatibility and other tricks.
I’m not very proud of this library and I cleaned it up many times with the secret hope to remove it completely, but it is very tightly linked to our “historic” development environment; if I had to fork the Gantt from our platform it would become difficult to maintain.
Core objects
We have now arrived at the application’s core.
We divided the editor in three parts:
- the GridEditor object that manages the left part of the editor. Data editing is managed here.
- the Ganttalendar (sorry for the ugly name!) object that manages the right part of the editor with Gantt drawing, calendar scale, task date movement
- the GantMaster object that is responsible for the coordination of both sides, transactional management, event management and persistence.
Your code should “talk” only with this object.
These objects are in the gridEditor.js, gantDrawer.js and gantMaster.js files respectively.
The entities managed are: Task, Link, Resource, Role, Assignment, and are defined in ganttTask.js file.
Events
Once the Gantt Editor has been initialized
var ge = new GanttMaster();
ge.init($(“#workSpace”));
it binds some events on the DOM object, in this case the DIV “workspace”.
Events bound are:
- refreshTasks.gantt: perform a redraw of all tasks
- refreshTask.gantt: accepts a task as parameter. Redraw the passed task:
- deleteCurrentTask.gantt: delete the current selected task
- addAboveCurrentTask.gantt: add a task above the current ones. The task inserted will be a brother of the current one
- addBelowCurrentTask.gantt: add a task below the current ones. The task inserted will be a child of the current one
- indentCurrentTask.gantt: the current task will become a child of the task above
- outdentCurrentTask.gantt: the current task will become a brother of the task above
- moveUpCurrentTask.gantt: the current task (and its own children) will be moved up
- moveDownCurrentTask.gantt: the current task (and its own children) will be moved down
- zoomPlus.gantt: restrict the time scale of the Gantt side (more detail)
- zoomMinus.gantt: enlarge the time scale of the Gantt side (less detail)
- undo.gantt: undo the last actions performed
- redo.gantt: redo last actions
A basic usage for triggering an event will look like:
$(‘#workSpace’).trigger(‘zoomMinus.gantt’);
When you perform an action in the project tree, the action could propagate along the tree. There are many constraints that must be respected like milestones, statuses, dependencies, boundaries and so on. Every constrain could make it impossible to complete the operation so we decided to wrap tree operations with a “transaction”; in case of constraint violation we rollback all the changes already done.
Events are transaction-safe, so you don’t need to worry about them.
Methods
The GanttMaster object exposes some useful methods you may need for your application.
Be careful: unlike events, methods exposed are “low-level”, so you are responsible for managing transactions correctly; transactions are not managed unless otherwise specified.
Here is a list of most important methods:
init (jQueryDomObject)
description: creates the Gantt editor, initializes project arrays, binds events.
jQueryDomObject: is a jQuery proxy for a DOM object tipically a <div> where you want to create the Gantt editor
return: nothing
createTask (id, name, code, level, start, duration)
description: creates a Task object. The task created is not added to project, just created
id: task id
name: task name
code: task code
level: task indentation level. Root task is 0 (zero)
start: the task start date in millisecond
duration: task duration in days
return: the task created
createResource (id, name)
description: creates a Resource object. The resource created is not added to resource list, just created
id: resource id
name: resource name
return: the resource created
addTask (task, row)
description: adds a task to the project at the specified row
task: a Task object
row: row where to add the object, zero based
return: the task added
loadProject(project)
description: loads a project on the editor. This method is transaction safe.
project: a project in json format as above defined in “Project Data Format” section.
return: nothing
saveProject()
description: gets the project in json format as above defined in “Project Data Format” section
return: the json object
loadTasks(tasks,row)
description: adds tasks to the current project from the specified row on
tasks: an array of Task object
row: row where to start adding tasks, zero based
return: nothing
getTask(taskId)
description: retrieves a task by id
tasksId: the id of the task you want
return: a Task object
getResource(resourceId)
description: retrieves a resource by id
respurceId: the id of the resource you want
return: a Resource object
changeTaskDates (task, start, end)
description: changes scheduling for a task in the project
task: task you want to change
start: the task start date in millisecond
end: task end in milliseconds
return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.
moveTask (task,newStart)
description: moves a task to a new starting date
task: task you want to move
start: the task start date in millisecond
return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.
updateLinks(task)
description: updates project link structure as defined in “task.depends” property
task: task you want to change
return: true if changing was performed, false if changes required are invalid. Error codes are set on current transaction.
taskIsChanged ()
description: notifies GanttMaster that a task has been changed and enqueues a request for redrawing both sides. Redraw is executed asynchronously and only once after 50 milliseconds
return: nothing
redraw()
description: redraw both sides. Redraw is executed immediately
return: nothing
reset()
description: starts a new project and empties both sides
return: nothing
showTaskEditor(taskId)
desciption: shows the complete task editor in popup
taskId: the id of the task you want to edit
return: nothing
undo()
description: undoes the last operation performed. There is no limit to the number of operations (the limit is just the memory of your browser)
return: nothing
redo()
description: redoes last operation undo-ed
return: nothing
beginTransaction()
description: saves the current state of the project in memory. Transactions cannot be nested
return: nothing
endTransaction()
description: closes the current transaction by making changes performed active. If there are errors set on the transaction, it rollbacks to previous state
return: true in case of successful commit, false if a rollback was performed
setErrorOnTransaction(errorMessage, task))
description: sets an error message related to a Task object in the current transaction. If no transaction is started the message is displayed on console instead.
errorMessage: a string containing the error message
task: the Task object that generates the error
return: nothing
Customization
The Gantt editor uses CSS so you can play customizing your Gantt editor look-and-feel.
Regarding internationalization, the question is a little bit complicated. As I’ve already said, actually only the English version is available.
The file “libs/i18n.js” is used for managing generic language/country specific data. There you can change the values for month names, day names, currency format, date format and some default message strings. Actually in our real environment (Teamwork) this file is server-side generated in base of user’s language settings.
In the same file you can/must change the implementation of the method isHoliday(date) that is used for taking care of working days. The current implementation supports both fixed holydays (like Christmas) and mobile ones (like Easter), but you can refine the implementation for your needs.
Gantt specific string are set on GanttMaster.messages object, and by default its values are in English: you can implement you own language.
Recycling
There are lots of “tools” that can be reused; here is a list of some that I think may save a lot of time to developers:
JST: a javascript templating system, see here previous post “Easy going JavaScript templates”, but the version in Gantt is the updated ones (read until my last comment in the post linked!)
DateField: a jQuery calendar input component. No frills!
Date/Time: lots of functions that support multiple formats, relative dates, shortcuts etc. The changes from Matt Kruse’s date library should be really useful for Java developers, and in general my version is a little bit more complete, even if the original its great by itself!
Gridify: a jQuery component that transforms a <table> making columns resizable. See it at work on the left side of Gantt editor
Splittify: a jQuery component that creates a splitter in a specified dom element. Used for splitting the editor from the Gantt part
Transaction, undo-redo: the idea and the implementation is very basic, so it can be used in many contexts
Profiler: a helpful tool for monitoring your javascript code performance
Field validation: validation function for email, url, date, time, integer, double, currency etc.
Everything is MIT!
I’m not sure if anyone can be interested on this stuff so for the moment that’s all, but in case someone is interested I’ll be pleased to publish a new post about them.
Every feedback will be really appreciated.
Thank for your feedback, it sounds interesting
What browser and locale are you using?
I have released a bugfix version on demo page http://gantt.twproject.com
updated sources: https://github.com/robicch/jQueryGantt
Can i use rowid set canWrite to false?the other row can write.
Can i get the task’s parent id?
Can i hidden the task where level=2 or 3….?
Is the task have parent attr?
No. You can set this property to the whole gantt only.
Yes. Use task.getParent().id
Not for the moment. You have to do this by yourself
No. See the Task.prototype.getParent implementation
Property canWrite isthe whole gantt only.
Is the another way to set the row can be write and the other row can’t be write?
No, but considering dependencies statuses and so on, how you can manage it when your write-only row is updated by cascade?
I avoided this messy situation by having r/o only at top level. If you like to implement this feature correctly you have to write LOT of code
Thank you! i said the write only just can’t edit the current tast attr(start day ,end day ,per….) .it like no infection by dependencies statuses.is it ?
Another,is the date skip sat and sun,can it be config?
You can configure your holidays by changing the function isHoliday() in i18nJs.js file
Thank you very match for this work.
There is one problem : the Gantt becomes VERY SLOW when the project contains a lot of tasks.
We have tried the gannt with more than 2000 tasks with each 17 subtasks. It took about 10 minutes for the gantt to load all the data.
We tried loading the gantt with 2000 tasks with each 15 subtasks. It take more than 10 minutes to load.
I am curious if removing templates and replacing them with string concatenation is going to improve those performance problems?!
… let me know, I’m curious too.
FYI: I’ve wrote a post related to javascript templates: http://roberto.open-lab.com/2010/09/14/easy-going-javascript-templates/
and the one I used in Gantt editor supports both function and string approach, but I never tested how fast/slow they are.
- is there a way to calculate/show critical path (are you planning it in future?)
- Is there a way to group few task and create a summary task?
- is there a way to calculate/show critical path (are you planning it in future?)
No. Actually we do not use CPM technique in our software Teamwork (http://twproject.com) so we do not have plan to develop it.
- Is there a way to group few task and create a summary task?
No. If you need to group some tasks, probably this is a “phase” of a larger project that in Teamwork need its own dates, status, deliveries and so on. So the easy way to “group” its simply to create a “parent” task.
Thanks for your reply Roberto
Thank you for these great chart. I was happy to find it, as half a year ago there was nothing, close enough, to suite what i need.
Are you planning to implement colapsing/expanding for nested ( level 1,2,3 etc) tasks
Is there a way to keep header row freezed while scrolling?
I’ll implement expand/collapse feature, but not soon, i’m actually involved in Teamwork core development.
Regarding headers, are implemented using a “tr”, so freezing them it is not immediate, you can try by playing with “position:fixed” but there are many things to take in care.
Can you also point me or just explain on business logic behind dependencies and isMilestone properties of tasks?
Dependencies:
see http://en.wikipedia.org/wiki/Dependency_(project_management) for a complete reference
We support directly only finish-to-start. A FS B = B can’t start before A is finished
Milestones:
In Teamwork each start or end date can be set as “milestone” (by setting startIsMilestone or endIsMilestone to true).
Once set to true, task’ start/end can’t move accidentally. You always can change dates directly on the task, but not by acting on children or predecessors.
Thank you so much for this.
Thank you. Very good Code.
I found bug at file
ganttGridEditor.js linha 453 e 454
ass.roleId == roleId;
ass.resourceId == resId;
Corrected
ass.roleId = roleId;
ass.resourceId = resId;
I need more tasks at level 0. It is possible?
Thanks Marlon, sources updated.
This is a very good concept. Is it possible to have more than one tasks for a resource on a row ? i.e. one tasks on day 1 and another on day 2…
It won’t be gantt chart anymore. create subtasks for task1 and task2 ie, parent task is level 0 and task1 and task2 is level1
No, but you can have two task (in different rows) assigned to the same resource.
Actually, if you have two task in different day, you probably need to perform something slighting different
Great work! Is there a possibility using it as a viewer (load Project, JSON) and disable the editing functions?
Yes, try setting “canWrite”:false
Hi,
So far this is the best tool which suites my needs. But I’m trying to show today’s date at the beginning of the grid. Is that possible? The option to scroll to the left, to look back in the past, would be nice to have.
Thanks in advance!
I’ll work on it!
Thanks
Done!
Wow, Thanks!
Wow! Thank you for this.
Question: when I import the dates into PHP/MySQL I’m assuming the numbers exported from the gantt are unix timestamps, but I get nothing like the dates on the chart. Could you enlighten me please?
Dates are in milliseconds (this is the standard for java, javascript, lots of DB etc.)
Enjoy!
for php:
dateMySql = date(“Y-m-d”,milliseconds / 1000);
duh, of course; read the documentation, didn’t make the connection, Thanks.
Quick question: hope I’m not abusing the forum or your time. I can download my project from its PHP application. When I try to edit/save a task in the Gantt editor I get
task.assigs.filter is not a function
task.assigs = task.assigs.filter(function (ass) {
When I click on the “edit resources” button I get a blank window without the data entry fields..was wondering if the two were related.
Greatly appreciated if you can help.
Thanks.
Hey Roberto,
First of all congratulation for building a such a nice javascript plugin.
I am integrate it with PHP app and want to know something about an events.
Is there an update event available? When we update tasks and when we go for save tasks at that time we come to know that these many tasks have been updated so that we can write an update query for only those tasks not for all.
I am waiting for your reply.
:Malay
Hi Malay,
unfortunately the Task object is not modeled event based.
In my application I perform that check server-side, by comparing client copy with server’one.
Changing the code introducing a “dirty” flag on task, that will solve the problem, is an invasive changing.
I suggest to clone your project structure when loading the project and then compare it with the edited ones when saving.
Hello Roberto,
Have you planned to make the plugin compatible with JQuery 1.9?
Thanks,
Chris
There are some dependencies on component that doesn’t run.
I’ll do it, but now, this is not a priority for us.
Hello, Roberto!
Great job and very short time! Im marketing manager and ex-programmer.
Is it possible to assign number of resources and % of usage? Otherwise like Duration relates to Real Work Time? It is what I see on Gantter.com as example. Simple but good logic. Maybe it can be useful like idea.
I want to do small task management with “tree” data hierarchy. It is out of huge collaboration, task and project management services I checked last days.
Now try Podio. But they philosophy “Simple” sometimes too simple. They avoid on all forum’s questions Parent-Child dependecies. No one project possible to work in real life. Just notebook “to remember”. Podio is good constructor for small simple models 1-1 relates with some weaks. But still not more.
TeamWork very complex and not good to sturtups and small growing company for the 1st time. Like my projet
Will follow you!
Cheers.
Thank you!
You can assign multiple resource for each task and define for each resource the estimated work-effort (in hours). So you can have a task lasting 10 days with one assignment for 40h (50% load assuming 8h/day).
Teamwork is not complex, is complete
Give it a try.
Actually you can use it in multiple ways starting from a “agile” approach (few tasks/multiple issues) to a (nasty!) classic waterfall approach
Cheers
Thank you. It is great. At weekends will try.
Have a good day!
PS: Firefox 18.0.1 didnt do submit button action. So post from Chrome.
power of wordpress!
I want to use your Gantt in a aspx-Page (Asp.NET / C# (not MVC)). How i can do it best? Any idea?
I’m not a C# expert, but it should easy as the there is no interaction with the server during the editing phase.
You have to implement only save and load. In the gantt.html page there is the server-side implementation commented.
My back-end (Teamwork) is completely written in java.
Roberto,
Very impressive work. Is it possible to assign different calendars to each task? For instance, one task may not be doable on weekends, while another might ignore weekends and holidays completely.
Not by default, I’m sorry.
The implementation is not impossible but quite heavy.
Hello, Roberto!
I am implementing task drag and drop feature in gantt but facing difficulties in task drop part. Could you please guide me, what all I have to do to implement this feature.
Hello,Roberto!
i am using your teamwork gantt chart.my problem is if i load more than 80 task it was unable to load and also it was giving me the stop script popup.can u suggest how to fix this issue.
sorry same francis here
coul’d u pls tell me maximum how many task i can add in teamwork gantt chart
I tested it with 80 tasks with Chrome and its works quite fairly. Different browsers have different performances.
Actually in our solution we discourage usage of large projects, so we are relatively “insensible” to this issue
But I remember a gantt library tested with thousand of tasks, so have a lock to my first article.
How to rename column headings eg: end to finish. Also How to add custom columns to the grid on the left pane.
Have a look to the “templates” in gantt.html, div with id=gantEditorTemplates (ln 391)
Very impressive work! Works very well for my needs. I have implemented it on a very simple mutli-user php system. I will release the code soon.
I also wanted to let you know in platform.js, line 843 & 887
I changed
backgroundImage:”url(‘/applications/teamwork/images/black_70.png’)”
for
backgroundColor:”rgba(0,0,0,0.5)”
Thank U thank U Soooo muchhhh
I solute U SIrrr
For those who want a very simple PHP server for this gantt, here is the source code:
http://www.webstudiodev.com/planner/
Its free and open.
Happy gantting!
Is there a way to set 2 or more tasks on a same line (like a scheduler) ?
thanks
Not by default. You have to put your hands on.
Thanks Roberto, It’s that I thought
Some advices to do it ? Which script needs to be modified ?
Everything is in ganttDrawer.js Ganttalendar.prototype.drawTask method.
The x coordinate (left) is computed using start and duration, and this is.
The y coordinate (top) is by default set at the same top of the editor line
var top = editorRow.position().top+self.master.editor.element.parent().scrollTop();Probably you have to add a property on task object to specify that the task is “inline”, and the change drawTask method.
Hope this helps
Thanks Roberto.
I’ll give it a try.
Hello. I am trying to get this working with .NET MVC4 . I am getting the error – Uncaught TypeError: Cannot read property ‘length’ of undefined in ganttMaster.js:329
I am confused about the format of the JSON response, as your code example tests for ‘response.ok’
Hi.
Did you tried with different browsers (e.g. Chrome), in order to clean the scene from oddities?
Actually in my example the server-side integration is only simulated, so the “response.ok” is merely a possible implementation.
Have a look to loadFromLocalStorage() function on gantt.html and to the content of textarea on the same file.
Hoping this helps,
Roberto
hi can I get jquery gantt editor + asp.net code?
I don’t have any asp.net example. Maybe in the github branches?
HI,
I am trying to save data server side, now when I uncomment save logic from my Gantt.html it gives me error that “Microsoft JScript runtime error: Unable to set value of the property ‘position’: object is null or undefined” I am not able to configure it out.
Thanks.
The server side logic is not implemented at all. The commented functions should be used as an hint, not as a real implementation.
Try with a different browser to have a better error feedback.
Hi sir i am trying to implement this one in my php project ,where exactly the JSON data fromate is storting and how i need t o get the JSON data from data base in my php code
I’m sorry but I’m not a PHP developer, but googling for “php json” there are a lot of results…..
Try this one if you will
http://www.webstudiodev.com/planner/
Hi,
This is Raghuram i want to develop gantt chart using php and i need to get the data from server i getting default data always how can i load my custom data please can you give some example to load data from sever.
Hello,
Would need help.
First fantastic tool, perfect control orders.
I have data returned from PHP.
Format:
[{"id": 1, "name": "Feature 1", "values": [{"name": "Now", "start": "9th May2013 12:00:00 AM (UTC)", "end ":" 10th May2013 12:00:00 AM (UTC) "," color ":" # f0f0f0 "," desc ":" bbbbbbbb "}]}]
I think it’s right?, But gantt does not work, does not show, does not say anything!!
I would appreciate your experience in this plugin.
Several weeks to make it work and I can not display data.
at.
Hi,
doesn’t work because the format is invalid…..
This is your:
[{"id": 1, "name": "Feature 1", "values": [{"name": "Now", "start": "9th May2013 12:00:00 AM (UTC)", "end ":" 10th May2013 12:00:00 AM (UTC) "," color ":" # f0f0f0 "," desc ":" bbbbbbbb "}]}]
Here the right one:
{“tasks”:[{"id":1,"name":"Gantt Editor","code":"","level":0,"status":"STATUS_ACTIVE","start":1368482400000,"duration":21,"end":1370987999999}],”selectedRow”:0,”canWrite”:true,”canWriteOnParent”:true}
At glance oddities:
1) there is no “tasks” array defined
2) “values”, shouldn’t be there
3) start and end dates are in invalid format you must use milliseconds instead
4) “color” will be ignored
5) “status” is missing
6) “duration” is missing
please, refer to http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/ “data structure” section for the complete reference.
hope this helps
I need to specify start date, how can I do that?
“start” is a number of milliseconds from the midnight, right?
Obviously not
(this can be at its best hours expression)
A date expresed in milliseconds is intended as the number of milliseconds that have elapsed since midnight, January 1, 1970.
This is the standard for Java, JS, .NET.
Hope this helps
Hey Roberto,
Thank you for your great GANTT solution.
I am currently trying to integrate it in order for it to read pre-fabricated JSON objects (canWrite:false).
I am kind of new to json and programming in general, and I do not understand where the json object is sent when I type ge.saveProject() in Firebug’s JS debugger.
Could you help me understand please?
Hi Max,
ge.saveProject() returns a json object containing your project; do nothing else.
Have a look to saveGanttOnServer function; the actual implementation save your project on the browser local storage, but there is also a commented example of a server-side integration.
Thank you for your quick answer =)