Scrolling to Date and Task

Gantt
#1

Hi,

I am currently using something like this to scroll to today’s date.

var scrollX = gantt.posFromDate(new Date());
gantt.scrollTo(scrollX, 0);

This allows me to scroll to today’s date but how can I make it such that it will be in the middle of the view port?

Say my screen able to view 11 day in one viewport.
If I click scroll to today, it should be shown as something like this.

image
image712×676 1.92 KB

It’s a ugly sketch, so bear with me. I want the today to always try to be at the center of the viewport, the current one of mine will be like what is shown in the sketch below. Sometimes or mostly it will show on the left.

Secondly, is there any API that allows me to jump to the task?
For example, I am currently loaded with 100 data, after gantt is loaded, and I want to be able to jump (scroll to) directly to show Task #50.

So gantt always load and show from the start, like this.

image

But I know I want to jump (scroll to) Task #40, after gantt load, gantt can directly show as such

image

If I didn’t explain it clear enough, do let me know so I can try to come up with more proper example.

Thanks!

#2

Hello Joseph,

This allows me to scroll to today’s date but how can I make it such that it will be in the middle of the view port?

You can obtain the visibile timeline width and divide it by 2, then you can subtract that value from the “today” position to get almost the center position.

var additional_width = (gantt.$container.offsetWidth - gantt.config.grid_width) / 2
var position = gantt.posFromDate(today) - additional_width; 
gantt.scrollTo(position)

Here is an example of how it might work:

Secondly, is there any API that allows me to jump to the task?

Yes, you can use the showTask method:
https://docs.dhtmlx.com/gantt/api__gantt_showtask.html
Here is the snippet:
http://snippet.dhtmlx.com/c8f97ebf5

#3

Hi @ramil,

Thanks for the sample. Looks really good to me, will test it out.