Toggle expand/collapse task

Gantt
#1

Hi,

Please take a look at this snippet.

My end goal is to be able to:

  1. Display the expand/collapse icon on Task that doesn’t have children.
  • Note that in the data, the task type is store, is unscheduled and open is false for no child task
  • In actual app, open is computed on runtime to decide whether to set to true/false
  1. So Task with children should have the expanded view and task with no children should show non-expanded view when first load.
  2. On click on the task with no children, the expand/collapse animation should still be shown it being toggled.

The snippet shows what I have done but I met with some issue with it.

  1. I added the following so that the task with no child can also display the icon. Let me know if there is a better way to do so.
gantt.templates.grid_blank = (task) => {
  if (task.type === 'Store') {
	if (task.open) {
      return '<div class="gantt_tree_icon gantt_open"</div>';
    }
    return '<div class="gantt_tree_icon gantt_close"</div>';
  }
}

  1. I used back the onTaskOpened and onTaskClosed event to always call the toggle animation. But the behavior is a little weird.

  2. I added _____ so that the text will not be shifted behind the icon, for better visibility

  1. I’m not sure why there is this gap in the grid for Task #2 and Task #5.

image

  1. Task #2 and Task #5 has already been set to open = false but when it loads, Project #2 icon is expanded. Task #2 and Task #5 should be not expanded?

  2. Click on Task #2 expand icon once, it should toggle and change the icon to the other state, but it does not. However, if I click again, it does toggle.

  3. On fresh load, click on Task #2 icon twice, now the icon will be as such.

image

Then now click on Task #5, notice that Task #5 icon doesn’t toggle, but instead Task #2 icon toggles.

image

Thanks.

#2

Hello Joseph,
Have you tried the branch_loading functionality? You can read more about it in the following article:
https://docs.dhtmlx.com/gantt/api__gantt_branch_loading_config.html
Here are examples of how it works:
https://docs.dhtmlx.com/gantt/samples/02_extensions/06_dynamic_loading.html
https://docs.dhtmlx.com/gantt/snippet/2877d892

There are 2 things you can change:

  1. You can add the $has_child property to all tasks that should have the expand/collapse icon.
gantt.eachTask(function(task){
  if (task.type == 'Store'){
    task.$has_child = true
    gantt.updateTask(task.id)
  }
});
  1. After changing a task property(the open property in your case), you need to repaint the changes. That can be done by using one of the following commands:
    • gantt.updateTask(id)
    • gantt.refreshTask(id)
    • gantt.render()
    • gantt.refreshData()

Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/2a80490e5

#3

Hi @ramil,

Not yet, but I’m not using dataProcessor feature but it gave me the idea that I can dynamically fetch the data when needed rather than fetching all together. I can implement that I guess. Thanks.

The snippet you given seem to work perfectly, but when I tried to test it on a sample react app that I did previously - snippet, it didn’t work. I’m not sure if there’s anything that I missed out. The expand/collapse icon wasn’t displayed.

In my snippet, you can click on Task #4 and look at the console, and somehow, the $rendered_type is still task instead of store. Any idea?

And I also noticed that by adding $has_child to the task, I don’t even need to manually set the open state in onTaskOpen and onTaskClose event right?

#4

Hello Joseph,
It doesn’t work even in the following snippet:
http://snippet.dhtmlx.com/a603b688a
But it happens because it is related to the branch loading functionality that is available only in the Pro version:
https://docs.dhtmlx.com/gantt/api__gantt_branch_loading_property_config.html

In my snippet, you can click on Task #4 and look at the console, and somehow, the $rendered_type is still task instead of store. Any idea?

Custom task types are also available only in the Pro version:
https://docs.dhtmlx.com/gantt/desktop__task_types.html
https://docs.dhtmlx.com/gantt/api__gantt_types_config.html

And I also noticed that by adding $has_child to the task, I don’t even need to manually set the open state in onTaskOpen and onTaskClose event right?

Correct.

#5

Hi @ramil,

I thought that the snippet are running pro/enterprise version?

Yup, I understand this, and I am using enterprise in my work.

How can I make it for the snippet to run the pro version so I can reproduce the issue?

#6

Hey, my bad.

I tested on mine with enterprise version, and everything seem to be working fine for now. Will come back again if I get any issue with it.

Thanks!

#7

Hello Joseph,
Congratulations!

I thought that the snippet are running pro/enterprise version?

That depends on the Javascript file you connect. The following link points to the latest GPL version:
http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js
You can read more about it in the following article:
https://docs.dhtmlx.com/gantt/desktop__cdn_links_list.html

#8

Hi @ramil,

GPL version means the community (free) version right? So there isn’t one CDN for pro/enterprise license?

#9

Hello Joseph,
Yes, the GPL version is the Standard Free version.
There are online links for the version that has all Gantt functionality, we use it to demonstrate all Gantt features. But that Gantt version shouldn’t be used outside the dhtmlx.com domain unless you send us a demo that demonstrates an issue in the Pro version.

#10

Alright, thanks for the clarification.