dhtmlxgantt with knockout js

Hello all,
I’m working with DHTMLX Gantt library with knockout js and I could not get it to work with knockout’s binding handler. I have a simple div element in my html as shown below:

And this is how i’m using the dhtmlx gantt library to initialize my gantt chart:

!function ($) {
“use strict”;
if (typeof ko !== ‘undefined’ && ko.bindingHandlers && !ko.bindingHandlers.dhtmlxgantt) {
ko.bindingHandlers.dhtmlxgantt = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
gantt.init(element);
gantt.parse(valueUnwrapped)
}
}
};
}(window.jQuery);

‘element’ in the above snippet is a simple json object that contains the data for the gantt chart. I have no errors in my browser console, but the chart is not being rendered on the specified div element. Any idea is greatly appreciated.

Hi,
try setting a fixed height to the #mygantt element, i.e.

<div id="mygantt" class="gantt_here" data-bind="dhtmlxgantt: gantt" style="width:100%;height:600px;"></div>

Probably it’s not displayed because 100% height div is placed inside a container which is collapsed (has zero heigth)

your help was very helpfull thanks. Anay my other question is the gantt on page/first load i can’t see the data and gantt_task exceeds my div size when it reloads i get what i want but not on the first load.

The first images shows the expected result where as the second image shows what it looks on page(first) load. When i try to inspect the page using google chrome gantt_task has a data. Thanks




Hi,
can you please give a link to that page, so I could check the problem?