Hi,
You can use the
onTaskRender
function | null
This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:
1. 'task' – The full task object containing all associated data.
2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
3. 'taskElement' – The root HTML element representing the task in the DOM.
4. 'segmentElement' – The HTML element representing the current segment of the task.
5. 'labelElement' – The HTML element that displays the segment’s label.
You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.
Try a demo showcasing the onTaskRender property.
Example
Set the onTaskRender property.
<smart-gantt-chart on-task-render='null'></smart-gantt-chart>
Set the onTaskRender property by using the HTML Element's instance.
const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } };
Get the onTaskRender property.
const ganttchart = document.querySelector('smart-gantt-chart');
let onTaskRender = ganttchart.onTaskRender;
Hope this helps.
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/
.
