Tasks not showing on initial load

Gantt
#1

All,

I have implemented the Gantt functionality using jQuery. I load some dummy tasks.
HTML:

<div class"mygantt" id="chart" style="width:100%; height:100%;"><div>

JS:

this.$chart = this.$("#chart");

this.$chart.dhx_gantt({ 
  scale_unit: "month", 
  date_scale: "%M", 
  readonly: true
});

var tasks = {
   data: [{
   id: 1,
   text: "Intake",
   start_date: "01-09-2015",
   duration: 11,
   open: true,
   color: "green"
  }, {
   id: 2,
   text: "Preparation",
   start_date: "12-09-2015",
   duration: 15,
   open: true,
   color: "red"
  }]
};

gantt.parse(tasks);

My issue is that the tasks are not showing in the timeline with the initial call.

Gantt_initial.png1195×191 16.5 KB

I have implemented a “refresh” button and when I use this calling gantt.refreshData(), the tasks appear on the timeline.

Gantt_refresh.png1204×204 19.4 KB

I have implemented the refresh function also in the initial function and the loadTasks function, but every time the tasks are not showing on the initial load.

What am I doing wrong? How can I solve this issue?

#2

Hello,
your code seems working ok
docs.dhtmlx.com/gantt/snippet/bd5808ba

Maybe some other code affects the rendering. Can you provide a more complete example?
You can modify the snippet above and save your version by pressing ‘Share’ button

#3

I am using Backbone and Bootstrap. Maybe anyone already has some suggestion or know about known issues regarding this?

I will extend the code in the snippet soon.

#4

Hi,
probably gantt is initialized before bootstrap completed setting layout sizes.
Did you try initializing gantt from document onready handler?
I.e.[code]$(function(){
this.$chart = this.$("#chart");

this.$chart.dhx_gantt({
scale_unit: “month”,
date_scale: “%M”,
readonly: true
});

…
});[/code]

#5

Hi,

Did you get it fixed.? I use require.js and have the same issue.

/Lars