Using DHTMLX Gantt Chart with MeteorJS Framework

MeteorJS is an open-source real-time JavaScript web application framework written on top of Node.js. The coolest thing about it is the ability to automatically transfer data changes to clients in real-time without requiring the developer to write any synchronization code.

On the client, Meteor can be integrated with any JavaScript UI library and we have managed to simplify using of dhtmlxGantt with this framework.

Why you may need this?

If you create a project management application (with Gantt chart in our case) and use Meteor Web Framework, the end users of this app will be able to see all the changes of the charts in real-time. Business analysts and project managers would highly appreciate this ability – monitoring of the whole project process would be faster and more productive.

Leaving aside many words about the benefits of this integration, let’s move on to the technical part. Here we have two options:

(1) Special dhtmlxGantt package for Meteor

In general, you may download the package from our website and integrate it in your Meteor app, but it will require much more additional work: go to the website each time when the version is updated, download the package, unpack, include it, etc. That’s why we created a special package which requires only two small steps to start using dhtmlxGantt with Meteor:

What if we told you that export to/import from MS Project is available in dhtmlxGantt? “Finally!” would be a pretty fair reaction of many users....

Comments

Francisco CalleMay 26, 2015 at 9:59 am

It’s great to know about this adapter. I’ve used DHTMLX-Gantt tool with previous versions of Meteor (<0.9) and it was, to say the least, tricky ;-) to make it work properly (re-render was a real pain) but the results where worth it.

I know it’s late but sticking this in here for others to find. Put the initiation into the rendered function. That way the innerHTML that the gantt.init is trying to mess around with will actually be on the page by then.

Template.name.rendered = function() {

//Init dhtmlxGantt.
gantt.init(“gantt_here”);

}

NB I’m still having problems when updating a Task, oh well!

update failed: Access denied. In a restricted collection you can only update documents, not replace them. Use a Mongo update operator, such as ‘$set’.