[REACT] Gantt task labels

[ahmad.siddique]

Hi everyone,

In Gantt we have a feature to show and hide labels of tasks, I was wondering if there is any way I can customize this functionality to hide labels for only specific tasks?

Screenshot 2024-02-27 at 5.13.25 PM.png (59.7 KiB) Viewed 131 times

[tasnim]

Hi,

Sure, you could use the renderer to achieve it
https://bryntum.com/products/gantt/docs/api/Scheduler/feature/Labels#typedef-SchedulerLabelConfig
Example

        labels         : {
            left : {
                field  : 'name',
                editor : {
                    type : 'textfield'
                },
                renderer(props) {
                    return props.taskRecord.isLeaf ? props.taskRecord.name : '';
                }
            }
        },

Hope it helps.

Best regards,
Tasnim

[ahmad.siddique]

Thanks Tasnim.

I have a new feature item (Project Labels) in the features list. What I want is that when I check this item it shows or hides the labels for leaf tasks.

The original feature item "Task Labels" should keep working with its default functionality.

Screenshot 2024-03-14 at 2.51.05 PM.png (65.63 KiB) Viewed 70 times

The code you provided overrides the "Task Labels" functionality. I don't want to replace it but create a new feature.

[tasnim]

Hi,

It's pretty easy to achieve, no need to create a new feature

msedge_pu6yJapBu2.gif (346.6 KiB) Viewed 66 times

You can test it with our basic gantt demo here https://bryntum.com/products/gantt/examples/basic/ by replacing the code with the code below

import { Gantt, StringHelper } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';

let showLeafLabels = false;

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },
rowHeight : 70,

columns : [
    { type : 'name', width : 250 }
],

features : {
    labels : {
        top : {
            field : 'name',
            renderer({ taskRecord }) {
                return showLeafLabels ? taskRecord.name : (!taskRecord.isLeaf ? taskRecord.name : '');
            }
        }
    }
},

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
},

tbar : [
    {
        type : 'button',
        text : 'Show leaf task labels',
        onAction({ source }) {
            showLeafLabels = !showLeafLabels;
            source.up('gantt').refreshRows();
        }
    }
]
});

Hope it helps.

Best of luck ,
Tasnim