Set row height dynamically base on text content

Gantt
#1

Hi there!
In case of the text of left column was too long. I need to break line of the text as attachment.
expected .
How can break line of left column then set the height of corresponding task automatically.
Thanks before hands!

#2

Hi!

Unfortunately, there is no way to size rows independently.
While you can change row height from code, all rows have the same height as defined by gantt.config.row_height config.

You still have couple of ways to make such labels readable, but you’ll need to manage cell sizes from code.

One thing that may be not obvious is how to detect that text overflows the cell.
Usually, a good enough solution would be to estimate string size from its length - task.text.length * 7 - where 7 is an average width of a letter.

var characterWidth = 7;
var getStringWidth = function(text){
	return (text || "").length * characterWidth;
};

When you know the width of a string, you can check whether there is enough space in a cell to display it.
In order to do it, you can get the outer with of a column gantt.getGridColumn("text").width and take into consideration all paddings/icons that are there:

var characterWidth = 7;
var getStringWidth = function(text){
	return (text || "").length * characterWidth;
};

var getColumnPadding = function(task, column){
	var padding = 0;
	if (column.tree) {
		var iconWidth = 30;// folder/file icon
		padding += iconWidth + (gantt.calculateTaskLevel(task)) * 18;// level indentation
		
		padding += 20;// expand/collapse button width
		
	}
	return padding;
}

// here we are:
var getAvailableContentWidth = function(task, column){
	return Math.max(column.width - getColumnPadding(task, column));
}

Then, finally, you can detect text overflow for each and every task:

if(getStringWidth(task.text) > getAvailableContentWidth(task, column)){
    // text overflow for task id
}

and knowing when cell text overflows, you can try different things format it, for example

  1. use word-wrap in order to make multiline text inside cells http://snippet.dhtmlx.com/2feb5ede1

  2. or expand column in order to fit the text: http://snippet.dhtmlx.com/c964badd6

  3. or increase the row height http://snippet.dhtmlx.com/8a1f81bee (all rows will be affected)

#3

Hello Nguyen,
The dev team added the feature to set different heights for the task rows:
https://docs.dhtmlx.com/gantt/desktop__resizing_rows.html
You can check how it works in the following sample:
https://docs.dhtmlx.com/gantt/samples/02_extensions/28_row_resize.html