Customized grid and task headers

I’m trying to customized both gantt_grid and gantt_task by adding a new gantt_grid_scale and gantt_task_scale divs before the created ones.
The problem is : after such a nasty action the vertical scrolling bar is confused and i can’t scroll to the bottom tasks.
How can i tells to dhtmlx gantt to take into account the new header size ?


I found a way.
I modify css with onLoadEvent and onTaskOpened.
I 've modified:

  • gantt_grid and gantt_task div’s height (add second gantt_grid_scale height)
  • gantt_grid_data and gantt_task_data div’height (subsract second gantt_grid_scale height)
  • gantt_ver_scroll div’s height (add second gantt_grid_scale height)
  • gantt_ver_scroll div’s top (subtract second gantt_grid_scale height)

can you describe a case, when you need to manually add elements for the scales?
Is built in configuration not sufficient in your case?

I tried to customize content for gantt task scale by duplicating dom subtree. But this is painfull.
So i use DHX Gantt task scale configuration and i’ve added some custom options to get a customized rendering.

The need was custom render callback with date scale as parameter.


there is no callback that returns a scale dom elements. You can use onGanttRender event, which is fired after all gantt (including the scales) has been redrawed.

gantt.attachEvent("onGanttRender", function(){ something });
Can you describe what exactly are you trying to do and what do you need DOM elements for? Maybe there is an easier solution, which i could suggest if i knew the problem you are solving

Thanks for your advice.

I need to inline edit values in task scale and add computed property values for scale cell, based upon cell date.
Second needs is to add label in grid scale for those custom lines.

You may try to use a scale templates for computed values and custom html.
Template function can return any HTML string which will be put to into the cell. So it can be an html input with an inline onchage handler, or a calculated value. … alesformat … plate.html

As for grid area, it does not support multiline headers. Probably you could emulate it by defining markup in column.label, it also can contain any html content … lumns.html

The only other option of that approach is to alter elements manually from onGanttRender handler