React: how to render custom task label

[ceddy]

Hi

How can you render a task’s label as a react component instead of text?

[ivanpeevski]

Hi ceddy,

 

You can use the “formatFunction” task property to format / change the label of the task. If you need more advanced customization, you can use the “onRender” property, which allows you to modify the element itself.

You can see the descriptions of the two in more detail in the API page under “dataSource” – https://www.htmlelements.com/docs/gantt-api/

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ceddy]

Hi Ivan,

Can you share a codepen with custom react component using onRender property?

Thank. you very much
Ceddy

[ivanpeevski]

Hi ceddy,

 

Her is an example how to use the property:

{
label: ‘PRD & User-Stories’,
dateStart: ‘2021-01-10’,
dateEnd: ‘2021-03-10’,
class: ‘product-team’,
type: ‘task’,
onRender: function(task, segment, taskElement, segmentElement, labelWrapper){
let element = document.querySelector(‘#my-element’);
labelElemnt.appendChild(element);
}
},

Since it requires programatically moving the element, it may not be supported by some specific components.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts