Chart cell not highlighted when static_background is true

Gantt
#1

Hi,

I noticed that if I set gantt.config.static_background = true; and when I select the row, only the grid will be highlighted, and not the chart area.

See sample snippet - http://snippet.dhtmlx.com/bd034ebca

I need the static_background to set to true as I noticed that with a few hundred tasks and the scale resolution is set to minute, the rendering is very lag and slow, especially on slower computers.
However, with that in place, I am not able to see the selected row in Chart area.

Any way to workaround this?

Thanks.

#2

Hi,

Yes, selected row isn’t highlighted because in case when you set static_background to true, cells are not rendered as html elements in the timeline area. As a workaround you can draw new row element using the addTaskLayer() method over the background image to show the selected row. So, to solve the issue you need to add the code below:

(function(){

	function enableRowHighlight(gantt) {

		gantt.config.timeline_highlight = true;

		gantt.addTaskLayer(function(task){
			if(!gantt.config.timeline_highlight)
				return;

			if((gantt.isSelectedTask && gantt.isSelectedTask(task.id)) || gantt.getState().selected_task == task.id){
				var top = gantt.getTaskTop(task.id);
				var el = document.createElement('div');
				el.className = 'gantt_task_row gantt_selected';
				el.style.left = '0';
				el.style.position = 'absolute';
				el.style.width = '100%';
				el.style.top = top + 'px';
				el.style.height = gantt.config.row_height + 'px';
				return el;
			}
			return false;
		});

	}

	if(window.Gantt) {
		Gantt.plugin(enableRowHighlight);
	}else{
		enableRowHighlight(window.gantt);
	}

})();

Please check the updated snippet that demonstrates how it works:
http://snippet.dhtmlx.com/df7182c54

If you decide to add vertical markers and highlight certain dates in your app, you would encounter the same issue. If that happens please find the solution and the demo in the comment here.

#3

Hi @Polina,

Thanks for the snippet.

I supposed I can also do a check for scale is minute then I set static_background = true otherwise, I should be fine with day scale. Would that work? Anything to take note of?

if(window.Gantt) {
		Gantt.plugin(enableRowHighlight);
	}else{
		enableRowHighlight(window.gantt);
	}

What exactly does this do? I’m using React so does that make any difference to use the code you shown?
Can I place the IIFE (you written) on the onMount lifecycle?

Which comment are you referring to? I don’t see any comments.

#4

Hello Joseph,

I supposed I can also do a check for scale is minute then I set static_background = true otherwise, I should be fine with day scale. Would that work? Anything to take note of?

If you do not want to add the code for the additional layer, you can enable the static background for the minute scale only. However, please note, that if you increase the displayed date range, Gantt will have to draw more cells (and div elements) so it will affect the performance. In other words, the performance issue is related to the number of cells, so you need to apply the performance tweaks depending on that.

What exactly does this do? I’m using React so does that make any difference to use the code you shown?

That code makes sure that Gantt is loaded and applies the additional layer code. Also, it runs the enableRowHighlight function for the Pro and for the Standard versions. I think it is an example of how to make a function work for both versions. However, the static_background and the addTaskLayer features don’t work in the Standard version, so it might be just an example.

Can I place the IIFE (you written) on the onMount lifecycle?

I don’t specialize in React so I cannot explain how it should work, but I tried to apply it in a react project and found that it is necessary to change Gantt.plugin(enableRowHighlight) to window.Gantt.plugin(enableRowHighlight). Otherwise, it throws an error (probably, because the Gantt object is created but Gantt is not fully loaded).

Here is the demo:
https://files.dhtmlx.com/30d/341fe3d28029b93e9ed65e0b50f6bb01/react+additional-layer+static-background+highlight-rows.zip
Don’t forget to install the Pro or Trial version to see that the functionality works:
https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject

Which comment are you referring to? I don’t see any comments.

That comment is located below the article. If you don’t see it, probably the discuss comments have not been loaded and you need to wait a few seconds:

#5

Hi @ramil,

With the release of v6.2.0, it seem to me that this is no longer a issue to be concern of?

Using static_background config is no longer necessary. Now a default background is rendered with the ability to highlight individual columns and cells of the timeline.

In view of the recent change, now I no longer need to set static_background and the highlights works for both the grid and chart.

#6

Hello Joseph,
Yes, you don’t need to use the static background image. The 6.2.0 version works better than the old versions with the workarounds.