Handling multiple Gantt instances - Filtering Tasks

Gantt
#1

Hi,

I am working on an integration of Gantt with Salesforce and I am having a problem filtering tasks. Each time I apply filters and render the Gantt(with filtered tasks), I am having to reinitialize the Gantt(causing multiple instances to be created). This, in turn, causes issues while editing tasks in the light box. Each time I click to open a task, lightboxes equalling the number of instances created so far get triggered and opened. So, editing of tasks are rendered not possible. I have tried the following workarounds, but none of them seem to respond.

  1. Rerendering the Gantt
  2. Checking if multiple instances of gantt are created with a flag variable and only parsing existing data
  3. Attempting to use clearAll() to clear existing Gantt data
  4. Using destructor to destroy existing instances.
  5. Attaching events only if gantt instance has been newly created.

How do we retrieve exisitng Gantt instances? Is it possible to isolate creating the Gantt instances and parsing it multiple times?

#2

Hello Shilpa,
If you want to filter tasks with the onBeforeTaskDisplay event handler, you don’t need to reinitialize Gantt. You only need to call the render method to repaint the changes:
https://docs.dhtmlx.com/gantt/api__gantt_render.html

Here is a simple example of how it works:
http://snippet.dhtmlx.com/5/c272f735b

Also, when you reinitialize Gantt, the new instance is not created. That should happen only if you call the code that includes creating a new Gantt instance. For example:

Gantt instance is not changed

gantt.init("container")

A new Gantt instance is created:

function initGantt(){
  gantt = Gantt.getGanttInstance();
  gantt.init("container");
}
<..>
initGantt()

If you filter tasks by changing the data on the server, then you parse only that data, you also don’t need to reinitialize Gantt. You only need to use the clearAll method to remove existing tasks in the browser and use the parse or load methods to load new tasks.

#3

Hi Ramil,
Thank you for the response. I would like to know how we can retrieve an existing Gantt instance. Currently we are using the trial version of DHTMLx Gantt. Our code to initialize Gantt, parse and display it is given below.

const root = this.template.querySelector(’.thegantt’)
const filters = this.template.querySelector(’.messageClass’)
root.style.height = this.height + “px”
const gantt = window.Gantt.getGanttInstance()
__gantt__setup.prepareGantt(gantt,this)
this.gantt_attach_events(gantt)
gantt.init(root)
var result = __gantt__setup.parseData((this.myList.length ? this.myList : []))
gantt.parse(result)

After applying filters, we are calling the above snippet to repaint the gantt as the gantt.render() is not effecting a change. In doing so, we are typically calling Gantt.getGanttInstance() each time the filter is applied. Will this particular logic work with Standard Edition(I understand Gantt.getGanttInstance() can be called to create multiple instances only in the Professional and Enterprise editions) ?

Thanks

#4

Hello Shilpa,
In this part of the code, you are creating a new Gantt instance each time. So, its settings, event handlers, and loaded data are reset.

It seems that you filter tasks by modifying the array with the data and then giving it to Gantt. Usually, you only need to call the clearAll and parse methods for that:
http://snippet.dhtmlx.com/5/1501247ec

But if you switch between the tabs/views, the Gantt instance doesn’t change. In that case, you will need to create a new Gantt instance, or manually reset everything by yourself.
So, the approach you are using will only work in the Enterprise and Ultimate versions.
For other versions, you will need to manually detach all events, remove settings and the data and maybe do something else, because, there is no way to create a new Gantt instance.