Hello,
I’ve been using dhtmlxGantt for some months now and I have been trying to figure out a way to wrap the task name text for long task names.
Currently the text is hidden when the task name is too long. Instead, I would like to have the height of the row grow larger in order to accommodate the text. Is this possible in dhtmlxGantt?
If it is not natively possible, is it possible through clever use of CSS and/or clever JavaScript?
Thanks for the help!
Hello,
To set the height of task bars you can use task_height config:
docs.dhtmlx.com/gantt/api__gantt … onfig.html
And in this case you also need configure row_height:
docs.dhtmlx.com/gantt/api__gantt … onfig.html
To wrap the task name you need in task_text template:
docs.dhtmlx.com/gantt/desktop__t … lates.html
Thanks for that info.
So, the process is essentially to make the rows taller manually and then to use a template to create an area where the text can be wrapped using custom style rules.
That makes sense but I suppose it would also mean that if I wanted the chart to behave as intuitively as possible – by resizing the heights dynamically – this would have to be done manually by somehow calculating how high each row needs to be in order to display the full text with wrapping. I’m sure that’s doable, if not particularly easy.
Thanks again for the response. If/when I am able to implement my solution I’ll try to come back here and update the post with my solution to help out anyone else with this issue in the future.
Hi again,
So, it looks like the solution that was suggested is not going to completely fit my needs.
The issue is that the solution given would have me make each row taller by the same amount (by increasing the row_height property. However, I need each row to be able to be given a different height depending on the needs of that particular row’s text.
I’ve done some exploring and it seems that dhtmlxgantt does some calculations based on a static row_height property for all rows – these include calculations about the y-offset for the task boxes, links, and other elements in the gantt chart. That causes variable row heights to result in gantt chart elements being offset incorrectly.
A possible solution would be for me to re-calculate those offsets myself and re-apply those offsets manually. I could do this if I knew all the callbacks I would need to implement in order to re-apply the offsets after dhtmlxgantt attempts to apply its own logic.
Basically, there seem to be a large number of actions which cause the gantt chart to re-render and/or re-apply the y-offset property. I would need to know if there is a callback or series of callbacks I could implement that would be called after the default re-rendering/re-applying so that I could overwrite those y-offsets with the correct ones.
Is there a callback or series of callbacks like this?
Not a solution to exactly what you are asking, but I wonder if adding a tooltip that shows the full task name would meet your needs in some way. I find that many of the tools I use us this method of handing needing to truncate to fit the ui while still providing a way to see the truncated content.
evanstern,
You are right, that by default the height of all rows has the same value.
Perhaps you can try to use onDataRender event to reorder events’ height in way you want, but I’m not sure that it will work correctly.
docs.dhtmlx.com/gantt/api__gantt … event.html