а

With Smart rendering enabled, get tasks currently in DOM?

#1

Greetings,
I have smart rendering enabled, Is there a way to find the list of tasks that are currently visible in the view?
Lets say I have 18 tasks currently rendered based on my screen real estate. I want to find the id of the last task and then scroll to task 19 at the top.

My current solution: 
- $(".gantt_bars_area > div:last").attr("task_id") - will give me the last task id, use that to find the next_task_id. 
- gantt.scrollTo(null, gantt.getTaskTop(next_task_id)) - To render to the next screen from top.

Is there is a cleaner way of doing this with the api?

#2

Hello,
Although there is no special function to get all tasks displayed on the screen, it is possible to get it via API. Please check the following snippet to see how it can be implemented:
snippet.dhtmlx.com/6ea67e88a

gantt.getTaskRowNode is used to show the HTML element of the row. If it is not visible the function returns null. So we get all visible tasks IDs in an array. Then we just scroll down to the latest visible task.

#3

Hi,

Is there any new API that allows to get all task displayed on screen?
Or still need to use the gantt.getTaskRowNode for it?

Thanks.

#4

I used a different approach, there is a method <gantt.getVisibleTaskCount> which is nothing but this._order.length;

I could simply do gantt._order and get the list of visible task ids array.

#5

Sorry, I don’t get you.

gantt.getVisibleTaskCount only gives you the number of task visible.
How do you infer from that what are the task shown on screen?

If there are 100 items, currently showing item 58 - 68 (for example), gantt.getVisibleTaskCount gives you 10. but how do you infer from that?

#6

If you look inside the method in web inspector , it’s simply returnsthis._order.length.
Now in the console, if you print gantt._order, it will return you an array of the ids.

#7

Hello Joseph,
We don’t have an API command that will return all tasks that are visible on the screen.

But you can use the following commands to get visible task IDs by using DOM properties (that should be faster than checking all tasks):

var data = gantt.$grid_data.childNodes;
var ids = [];
for (var i = 1; i < data.length; i++) {
  ids.push(data[i].attributes.task_id.nodeValue)
}
console.log(ids);

Here is the snippet:
http://snippet.dhtmlx.com/c8b542f25

Another way to do that is to get the Gantt container parameters, calculate the number of visible tasks and get tasks by their index.:

var tasks = [];
var first_visible_id = Math.floor(gantt.getScrollState().y / gantt.config.row_height)
var visible_rows = Math.floor(gantt.$container.clientHeight / gantt.config.row_height); 
for (var i = 0; i < visible_rows; i++) {
  tasks.push(gantt.getTaskByIndex([first_visible_id + i]))
}
console.log(tasks);

Here is the snippet:
http://snippet.dhtmlx.com/f6aa10b72

If you look inside the method in web inspector , it’s simply returnsthis._order.length.
Now in the console, if you print gantt._order, it will return you an array of the ids.

It is not recommended to use the internal API methods as they might change and we won’t warn about that. If the public API method is deprecated, you are warned about that and have time to replace the commands.

#8

Hi @ramil,

The first snippet has an error, could you help to resolve it?

ids.push(data[i].attributes.task_id.nodeValue), it states cannot read nodeValue of undefined.

Thanks.

Regards,

#9

Hello Joseph,
Thank you for pointing that. I forgot to check how it works for the initial state, when one of the invisible rows at the beginning, not at the end. Here is the updated snippet:
http://snippet.dhtmlx.com/117ba1101