How to Use dhtmlxGantt with Vue.js Framework [Demo]

What’s extremely awesome about our Gantt Chart library (besides fast performance and vast variety of features) is that it allows integrations with almost all new and popular frameworks and technologies. And today we’ll show you the easiest way to use js gantt chart with Vue.js, progressive JavaScript framework.

How We Start

The first thing we need to do is to get app skeleton. And for this, we’re going to use vue-cli. If you don’t have one, you can get it with node package manager using command (npm install -g vue). See this article.

To create an app the run following command:

vue init webpack-simple gantt-vue

It will request for some project info. You can just leave default answers and press enter button for each question.

Then you need to go to the app directory, install dependencies and run it.

cd gantt-vue
npm install
npm run dev

After these steps, the app should run on http://localhost:8080

Moving to Gantt Chart Part

Now we should get the dhtmlxGantt code. Do so, run the following command:

npm install dhtmlx-gantt --save

Then, to add gantt chart to the application, we should create a component.

So, we’ll start with creating a folder for the app components. Open src folder and create components folder in it. Then, create Gantt.vue file in components folder and put the following code to it:

Listening changes and handling events

Let’s say we need to trace changes in gantt made by the user and process them somehow – show the details of selected item in a separate form, keep data model of parent component up to date, or send these changes to the backend. In other words, we need a way to let the rest of the app know what happens inside a gantt.

To do so we can capture API events of dhtmlxGantt and $emit them to the parent component.

As a simple demonstration, let’s implement a ‘changelog’ feature – we’ll write all changes made in gantt in a neat list somewhere on the page.

Firstly, go into gantt component and add code that will trace and emit changes of dhtmlxGantt. Add the following code right before gantt.init call:

What you can see here – we’ve added an array property where we’re going to store log entries, a method that adds a new message to the top of that array (our log will show new entries first). Also we’ve added two more methods that will create log messages for actions done with tasks and links and add them to message stack.

And finally update a template of the app component to utilize these functions:

Here we’ve added another container which is bind to selectedTask property of the app component using “v-if” directive. Also, we’ve added a handler for “task-selected” event we now emit.

Make sure to add this property to the app component:

selectedTask:null

And add selectTask method which is used in handler we’ve defined above:

selectTask:function(task){this.selectedTask= task}

Thus, each time user selects task inside gantt, the component emits ‘task-selected’ event. Then this event is captured by the app component. Inside an event handler, we update selectedTask property, which in its turn invokes a repaint .gantt-selected-info element with the task details.

Note that the task object has start_date/end_date properties of Date type and progress completion in float type – these should be formatted in human-friendly form before added to the page.

It’s implemented using toPercent and niceDate filters which we define like this:

Now, if we run our app and select some task, we should see that its info shows on the right.

So, we’ve created a simple Gantt chart with the help of dhtmlxGantt and Vue.js. The results of our work can be found on GitHub. If you follow the instructions above and meet any difficulties, don’t hesitate to share them with us.

Which technologies/frameworks are you using?

We need your feedback to provide the right integrations at the right time. Please leave your requests here:

There are all kinds of problems with this tutorial. After the first step of creating the Gantt component, the code doesn’t compile. http://eslint.org/docs/rules/no-undef ‘gantt’ is not defined
src/components/Gantt.vue:19:5
gantt.init(this.$refs.gantt)

Hi Andy,
We followed the tutorial and, unfortunately, were unable to reproduce the error you describe. We’ve sent some tips to you via email.
If the error persists, please create a topic on our forum and add a complete demo: https://forum.dhtmlx.com/

Hi Xiao Yu,
Please try to do the following:
One thing that needs correcting is the initial height of the dhtmlxGantt container in Gantt.vue:

add some default height, since dhtmlxGantt won’t expand the container:

Otherwise, everything seems working as expected.
re ‘gantt is not defined error’, make sure to add dhtmlx-gantt package into your project:
>> npm install dhtmlx-gantt –save
and then import it in Gantt.vue:
>> import ‘dhtmlx-gantt’
If none of this helps, please send a complete demo to support@dhtmlx.com

Hi I have problem. I use vue + vue-router + dhtmlx gantt.
When I visit gantt page and I visit other page and I visit gantt page,
(gantt page -> other page -> gantt page)
gantt page have multiple events.(ex. click light box..).
How can I solve this problem? Thank you.

Hi Hanbin,
It happens because dhtmlxGantt API event listeners (gantt.attachEvent) are attached each time the component is mounted.
Since each time the code works with the same global instance of dhtmlxGantt, the same handlers are attached multiple times.
As a solution – you can ensure that these events are attached only once per dhtmlxGantt instance, please check the latest changes in the demo repository: https://github.com/DHTMLX/vue-gantt-demo
We’ll update the tutorial asap.

Hi Frankly,
If you have any technical questions, please use our support system: http://support.dhtmlx.com or create a topic on our forum: https://forum.dhtmlx.com/
In the simplest case you can load data directly into dhtmlxGantt when it’s mounted:
mounted () {
gantt.init(this.$refs.gantt)
gantt.parse(this.$props.tasks)
this.$http.get(“./data.json”).then((response)=>{
gantt.parse(response.data);
});
}

Thank you for your careful explanation。I have found the mistake.the id of single data can’t be zero.Otherwise it will be wrong and throw an error called “stack overflow”……
Anyway, I’d like to thank you

execuse me, i have a confusion when i developed in vue.js version,I can’t find the ‘groupBy’ function in any js files, is I have a wrong understanding of this version or it can’t support the ‘groupBy’ ? And my version is “dhtmlx-gantt”: “^5.1.0”. Hope your answer, thanks in advance

i call the API in ganttHome page，Through the props to the Gantt page。Gantt pages are loaded every time they are loaded
false content:
“Error in nextTick: “TypeError: Cannot read property ‘length’ of undefined””
false reason: maybe data initial load is undefined

Hi Xiao Yu,
Can you please elaborate on this? Does the issue happen in the demo from this article, or does it happen in your app based on it?
Please create a topic on our forum for that issue: https://forum.dhtmlx.com/viewforum.php?f=15 ?
If you can make some kind of a test project which can be run locally and reproduces the error, it would help us a lot.

Thank you! This works almost great. The only issue that I am having is populating the tasks from a db (firebase in this case). I pull the info with the created() function and on the vue chrome extensions it shows that the items have been updated, but are not shown in the actuall chart. You know what could be the solution to that? I have already connected all the events like adding tasks and links to firebase and it works.

Is there a similarly comprehensive guide/article on using “dhtmlxGrid” with Vue.js? I’m evaluating dhtmlxGrid for a client project and will be using Vue.js for it. Will appreciate any info on any guides/articles on this.