Is It possible to Make Some Empty Rows to Full Fill the Whole Gantt Area

Gantt
#1

As blew attachment, is it possible to make some empty rows to full fill the whole gantt area?

Actually, this is for looking like a whole table in whole area instead of a breaking table for better user experiences.

I CAN NOT find any config for this. And hope any can help me! Many thanks.

40
40924×836 49.1 KB

#2

Hello,
Gantt doesn’t have a built-in way to do that.

It is possible to display the cells in the timeline if you use the static background and increase its height via CSS:
https://snippet.dhtmlx.com/5/02d11aa7a
However, there is no easy way to do that same for the grid. You need to implement a custom solution by using the Gantt API and Javascript.
If you want us to implement it for you, I can contact you with the Sales team.

#3

I think your solution can solve my problem. Many thanks, Ramil. :+1:

#4

According to your way, I have another solution as below, FYI:

gantt.config.static_background = true

const timelineBgHandler = (e) => {
  const taskRoot = $('.gantt_task_bg').first();
  const bgRoot = $('.gantt_task_bg').last();
  const lastTask = taskRoot.children(':last-child');
  bgRoot.children().css("height", "100%");
  bgRoot.append(lastTask.clone().children());
};
let handlerTimer;
gantt.attachEvent("onGanttScroll", (e) => {
  clearTimeout(handlerTimer);
  handlerTimer = setTimeout(() => timelineBgHandler(e), 300);
});
gantt.attachEvent("onDataRender", timelineBgHandler);
#5

Is there any alternatives available, as we are not using static_background = true

#6

Hello,

Since 8.0 version, Gantt has the ability to extend the background grid of the timeline to the whole container:
https://docs.dhtmlx.com/gantt/api__gantt_timeline_placeholder_config.html
So you can enable gantt.config.timeline_placeholder to fill the whole timeline.

Please check the example:
https://docs.dhtmlx.com/gantt/samples/08_api/23_empty_gantt_with_placeholder_views.html

1 Like