Choose between rightLabel or taskLabel

[Brandon]

Hi! 

Is there a chance to choose between rightLabel or taskLabel depending on the duration of the task
I mean, if the task duration is 4 days or less y will display the rightLabel because the task name doesn't fit inside the task in the gantt. But if the duration is more than 4 days I will display the taskLabel. 

For example, In this task, I only want to display the rightLabel 

On the other hand, In this task, I want to display the taskLabel 

[Premkumar Sudalaimuthu]

Hi Brandon, 

 

Yes, we can able to customize the task label using a task label template. We have achieved the requirement using the class name of the taskbar and applying styles to the taskbar for displaying task labels according to the duration. We have shared code snippets for your reference. Please refer to the below sample and our online demos for more information about how to use the task label template. 

 

Code snippets: 

 

Index.js 

 

  RightLabelTemplate(props) { 

    if (props.ganttProperties.duration <= 3) { 

      return <span>{props.TaskName}</span>; 

    } else { 

      return <div></div>; 

    } 

  } 

 

TasklabelTemplate(props) { 

    if (props.ganttProperties.duration > 3) { 

      return ( 

        <div 

          className="e-gantt-parent-taskbar" 

          style={{ 

            height: '100%', 

            borderRadius: '5px', 

            textOverflow: 'ellipsis', 

          }} 

        > 

          <span 

            className="e-task-label" 

            style={{ position: 'absolute', top: '5px', fontSize: '14px' }} 

          > 

            {props.TaskName} 

          </span> 

        </div> 

      ); 

    } else { 

      return <div></div>; 

    } 

  } 

 

 

 

 

 

 

 

 

 

Sample:  https://stackblitz.com/edit/react-hjqpjv?file=index.js  

  

Online demos: https://ej2.syncfusion.com/react/demos/#/bootstrap5/gantt/tasklabel-template  

 

Please contact us for further assistance. 

 

 

Regards, 

Premkumar S