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,
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:
scrollHeight
property of the text cells to determine if the content exceeds the current row height.scrollHeight
) is greater than the current row height (getTaskHeight
), update the row_height
property for the task.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