Wrap Text in Gantt

Hello,

I am trying to wrap the content of Text field on right click. I want to dynamically set the row_height according to the content inside the cell, so that the whole of text can be see when wrapped.
The default row height is 30.

Thanks!

Hello,
Unfortunately, there’s no built-in solution for this. However, you can manually implement it as follows:

  • Use the scrollHeight property of the text cells to determine if the content exceeds the current row height.
  • If the content height (scrollHeight) is greater than the current row height (getTaskHeight), update the row_height property for the task.
  • If any row height is updated, trigger a re-render using gantt.resetLayout().
gantt.attachEvent('onDataRender', () => {
    let repaint = false; // Flag to check if a repaint is needed

    const textCells = document.querySelectorAll(`[data-column-name='text']`);

    textCells.forEach((el) => {
        const taskId = el.parentNode.dataset.taskId;

        if (taskId) {
            const taskHeight = gantt.getTaskHeight(taskId);

            // If the content's scrollHeight is greater than the task height, update the row height
            if (taskHeight < el.scrollHeight) {
                const task = gantt.getTask(taskId);
                task.row_height = el.scrollHeight;
                repaint = true; // Mark for repaint
            }
        }
    });

    // If any row height was updated, re-render the Gantt chart
    if (repaint) {
        setTimeout(() => {
            gantt.resetLayout();
        }, 0);
    }
});

Use the following CSS:

.gantt_tree_content{
    overflow: unset;   
}

.gantt_tree_content,
.gantt_task_content {
    line-height: 12px;
    white-space: normal;
    overflow-wrap: break-word;
}

Please see an example: DHTMLX Snippet Tool