Question - Is it possible to disable collapsing in a Gantt charts?

[makrancziz]

Hello,

We're interested in using the "parent" property on Gantt data items to define the task hierarchy, but that comes together with expand/collapse feature, which we shouldn't have.
I haven't found any way to turn this feature off, but maybe you could help me in doing this, or suggest an alternative approach.

What we're trying to achieve is just to have indentation in the 1st column (where the task names are listed) to reflect the hierarchy, without any expand or collapse.

Thank you in advance,
Zoltan

[karolkolodziej]

Hi!
Welcome to our forum and thanks for contacting us with your question!

Unfortunately, we don't have such functionality.
It mich be impossible to achieve this without extending the Highcharts code: https://code.highcharts.com/gantt/highc ... ntt.src.js
You might read more about extending Highcharts here: https://www.highcharts.com/docs/extendi ... highcharts

You might always ask for this kind of feature on our GH: https://github.com/highcharts/highchart ... new/choose

Feel free to contact us if further needed.
Regards!

[wbeke]

Maybe it is a late response, but for others to use maybe.

But we figured out that if you find the element where the collapse is on, get the hcEvents and then remove the listeners, you disable the click

in code, it looks like this. Be aware that you need a timeout to find the element because it takes some time to load the SVG elements into the dom:

This is code used in our vue module, of course, you can adjust what you want to adjust to the elements found

Vue.nextTick(() => {
setTimeout(() => {
// Get the label which can be collapsed (site level)
var highchartsTreegridNodeLevel1Elements = this.getSvgElemByClass('highcharts-treegrid-node-level-1')
highchartsTreegridNodeLevel1Elements.forEach((item) => {
if (item.hcEvents !== undefined) {
if (item.hcEvents.click !== undefined) {
if (item.hcEvents.click.length > 0) {
item.removeEventListener('click', item.hcEvents.click[0].fn)
}
}
if (item.hcEvents.mouseover !== undefined) {
if (item.hcEvents.mouseover.length > 0) {
item.removeEventListener('mouseover', item.hcEvents.mouseover[0].fn)
}
}
}
})
// Get the icon in front which can be collapsed (site level)
var highchartsLabelIconElements = this.getSvgElemByClass('highcharts-label-icon')
highchartsLabelIconElements.forEach((item) => {
if (item.hcEvents !== undefined) {
if (item.hcEvents.click !== undefined) {
if (item.hcEvents.click.length > 0) {
item.removeEventListener('click', item.hcEvents.click[0].fn)
}
}
if (item.hcEvents.mouseover !== undefined) {
if (item.hcEvents.mouseover.length > 0) {
item.removeEventListener('mouseover', item.hcEvents.mouseover[0].fn)
}
}
}
})
// enable clicking again
// document.removeEventListener('click', prevent)
}, 2000)

and the function getSvgElemByClass

getSvgElemByClass(searchClass, node, tag) {
const classElements = []
if (node == null) { node = document }

if (tag == null) { tag = '*' }

// SVG = XML, so we need the XML method:
// using 'magic' namespace variable provided by websvg (svgns)
const els = node.getElementsByTagNameNS('http://www.w3.org/2000/svg', tag)
const elsLen = els.length
var pattern = new RegExp('(\\b)' + searchClass + '(\\b)')
var j = 0
var i = 0
for (i = 0; i < elsLen; i++) {
// inspect
// SVG specific helper
if (els.hasAttribute('class') && pattern.test(els.getAttribute('class'))) {
classElements[j] = els
j++
} else if (pattern.test(els.className)) {
classElements[j] = els
j++
}
}

return classElements
}

[sebastian.h]

Hi wbeke,
Thanks for your suggestion!

I big appreciate that you share your solution for the future users

Best regards.