Our state of the art Gantt chart


Post by raju1 »

My Requirement is:
How can I add a task layer background (Light shaded bg) under the parent tasks. This background is displayed behind the respected child tasks around.
Means Parent task -> child tasks -> light background with border for around the child task.

taskbg.png
taskbg.png (126.78 KiB) Viewed 2166 times

Thanks
Nagaraju

Last edited by raju1 on Mon May 10, 2021 1:26 pm, edited 1 time in total.

Post by alex.l »

Hi raju1,

We do not support this currently, here is a feature request: https://github.com/bryntum/support/issues/1290

All best,
Alex

All the best,
Alex


Post by raju1 »

I have customized the code to display the above design. Below code is working as expected.

taskRenderer : ({ taskRecord, tplData }) => {
         var childtasks=0;
         var dataDivLayer=0;    
    
if(taskRecord.data.expanded!=undefined && taskRecord.data.expanded==true){ for(var i=0; i<taskRecord.data.children.length; i++){ childtasks+=taskRecord.data.children[i].children!=undefined?taskRecord.data.children[i].children.length:0; } var rowHeight= tplData.row.lastHeight==0?tplData.row.grid.defaultRowHeight:tplData.row.lastHeight; dataDivLayer=(rowHeight*(taskRecord.allChildren.length+childtasks))+16; return `<div class="b-gantt-layerdiv" style="height:`+dataDivLayer+`px; width:`+tplData.width+`px"></div> `; } }

CSS:

    .b-gantt-layerdiv{background:#ccc; border:1px dashed #666; position: absolute; z-index:-1; left:0; top:12px; opacity:0.3; width:100px; height:100px;}
    .b-sch-foreground-canvas > svg{z-index: 222;}
    .b-gantt-task-content{overflow: initial!important; }
    .b-gantt-task-parent:not(.b-milestone-wrap) .b-gantt-task{clip-path: none;}
    .b-ganttbase.b-percentbar .b-gantt-task-parent{z-index: 4;}
    .b-gantt-task-wrap.b-active{z-index: 4!important;}

But only problem is while collapsing the task this custom div layer is visible. can you provide any suggesion for collapsing this div or how to apply display:none or height make it '0'.

bryntumLayer.png
bryntumLayer.png (66.25 KiB) Viewed 2128 times
Last edited by raju1 on Wed Aug 05, 2020 12:48 pm, edited 4 times in total.

Post by fabio.mazza »

Hi raju1,

The feature request opened on link above (alex post) will consider the background to collapse/expand with it like on Ext JS version (clicking on cog in top right, then Toggle task grouping and then collapse the task): https://bryntum.com/examples/gantt-for-extjs/advanced/#en

Best regards,
Fabio


Post by raju1 »

Is any update on this request?


Post by mats »

Not yet I'm afraid, as we have not received so many requests for it - other more popular features have to be done first. If you want this done sooner, there's always the Features Sponsorship available. https://www.bryntum.com/services/


Post by hwesthuis »

We also need this feature to complete the migration from the old ext.js version to the plain js version.


Post by mats »

Noted, we'll try to prio this soon!


Post by raju1 »

mats wrote: Fri Jun 18, 2021 9:40 am

Noted, we'll try to prio this soon!

This feature we already implemented in our gantt.

bgLayer.png
bgLayer.png (55.58 KiB) Viewed 1230 times

Thanks,
Nagaraju
9642818101


Post Reply