Expand/Collapse undefined on Gantt Instance

Gantt
#1

I have created a gantt chart instance using Gantt.getGanttInstance()).

I am doing this inside of an object so that I can reuse the same code throughout the site but retain the ability to make dynamic changes when I instantiate the object.

I have included fullscreen.js and if I use the global gantt.getState().fullscreen, gantt.expand() or gantt.collapse() I find them all to be defined. If I attempt to run those functions on my instance it states that they are undefined. I can access my instance directly and they are not defined.

I have included my code in this fiddle.
jsfiddle.net/cliffordkasper/xavtq4f5/

I created the instance, attached all the events and then I initialized the chart per the documentation (see Scheduler.prototype.$initGantt in the fiddle).

The data is being grabbed by an Oracle APEX process and this code is very Alpha.

I’m sure I am missing something very simple.

Thanks.

#2

Hello,
I suspect that the functionality you try to implement might include several Gantt instances on the same page. It is possible, but only for enterprise license.
Could you clarify what do you what to get in the end? If you just want to control Gantt, you don’t need to create several instances of it. You can easily do it via API functions. If gantt.getState().fullscreen, gantt.expand() and gantt.collapse() functions work, then you can use other functions. Here is a video, showing what you can do from the web console:
files.dhtmlx.com/30d/67e72353d5 … -58-56.mkv

#3

Thanks ramil,

There might be cases when there could be several gantt charts on a single page which is why I elected to use instances. Additionally, we are using the enterprise edition and have included all the associated JS files.

#4

Hello,
Thank you for the clarification.
You can try defining additional Gantt instances globally. For example, you can change this string:

self.gantt = Gantt.getGanttInstance();

like this:

window.gantt[self] = Gantt.getGanttInstance();

And then change other strings that related to new instances.
Then all new Gantt instances will be available not only within the function but also on the whole page, so you can call them like:

window.gantt2

But if you have several frames, you need to find which frame contains the instance. Here is an example with two Gantts and the second Gantt is defined globally:
snippet.dhtmlx.com/3dfcf84c1
Because of frames you need to call it this way:

window.frames[0].gantt2

And this is how to get the name of a task that belongs to the second Gantt:

window.frames[0].gantt2.getTask(1).text

There is another way to access any Gantt instance on the page, and you don’t need to define instances globally. Instead, you find them from the DOM (again, don’t forget about frames). So here we get the same result as in previous command but do it through the DOM:

window.frames[0].document.getElementById("gantt_2").gantt.getTask(1).text
#5

Thanks for the response ramil.

I took your suggestion and created this fiddle: jsfiddle.net/cliffordkasper/5vg8ptxe/

What I did was create one global at the top ‘GLOBAL_SCHEDULES’.

I then directly assigned the new Gantt instance to that global for testing:
GLOBAL_SCHEDULES = Gantt.getGanttInstance();
self.gantt = GLOBAL_SCHEDULES;

I can access the instance in the console and self.gantt points to that global so this should work. I have the exact same behavior as before, the expand() and collapse() functions are not added to the object.

break_

I just attempted to create a simple gantt using an instance but with everything being global and I have the same result (expand() and collapse() are undefined). I have included dhtmlxgantt_fullscreen.js and gantt.expand() is defined so I cannot explain why when I create an instance that functionality is not available.

#6

I did see that if I instantiate an instance using jQuery than the expand and collapse functions are available. I think I’m going to go that route instead.

update_

So this idea also fails as I cannot properly attach to events.

#7

Thank you for the clarifications.
There is only javascript code in the snippet. I think, it is not enough for me to reproduce the issue. Please send me full HTML-page with all necessary javascript code so I can reproduce it locally.
Or you can add the code in the following snippet:
snippet.dhtmlx.com/b3e34d9d5
After you edit it and see that it reproduces the same behaviour, click on the “Share” button and send me the link.

#8

Thanks for all your help ramil. I figured out my problem, I was using an incorrect version of the gantt chart files. After I pointed it to the correct file everything worked as expected.

Thanks again for all the time you spent helping me.