JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › React: how to render custom task label

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 14, 2023 at 8:42 pm #107471
    ceddy
    Participant

    Hi

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

    July 17, 2023 at 2:12 pm #107479
    ivanpeevski
    Participant

    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/

    July 17, 2023 at 4:53 pm #107480
    ceddy
    Participant

    Hi Ivan,

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

    Thank. you very much
    Ceddy

    July 18, 2023 at 12:45 pm #107493
    ivanpeevski
    Participant

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.