Bryntum Support Forums

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.

Thanks
Nagaraju

Hi raju1,

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

All best,
Alex

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'.

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

Is any update on this request?

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/

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

Noted, we'll try to prio this soon!

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.

Thanks,
Nagaraju
9642818101