Gantt resizer does not work on touch device

Gantt
#1

We could not move the resizer when we are in touch devices even with the browser stimulation where your mouse cursor turned into a circle, whereas it is working as expected in the Desktop size.

Below is how I config the layout:

gantt.config.layout = {
  css: "gantt_container",
  cols: [
   {
      rows: [
        {
          view: 'grid',
          scrollX: 'gridScroll',
          scrollable: true,
          scrollY: 'scrollVer'
        },
        { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
      ],
      width: 200, 
    },
    {resizer: true, width: 1},
    {
      rows:[
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
 
        // horizontal scrollbar for the timeline
        {view: "scrollbar", id: "scrollHor", group:"horizontal"}  
      ]
    },
    {view: "scrollbar", id: "scrollVer"}
  ]
};

How can we move the resizer on touch device?

In addition, we have to adjust the grid view smaller on mobile because if we do not then the timeline won’t have any width calculated and we must use autosize ‘xy’, is this normal?

#2

Hello Oliver,
The resizer itself should be working correctly. However, I see that the grid size is not changed.
You need to enable the grid_elastic_columns option:
https://docs.dhtmlx.com/gantt/api__gantt_grid_elastic_columns_config.html
Here is an example of how it works:
https://files.dhtmlx.com/30d/25672df7b683d3e1d7caf80eb64729e1/vokoscreen-2020-11-20_13-05-12.mkv
http://snippet.dhtmlx.com/5/b2d8dffdb

In addition, we have to adjust the grid view smaller on mobile because if we do not then the timeline won’t have any width calculated and we must use autosize ‘xy’, is this normal?

It is a bug that the grid is not resized on the smaller screens. The dev team will fix it in the future, but I cannot give you any ETA.

However, it is expected behavior that on the smaller sizes, you cannot show the whole Gantt chart.

#3

Hi ramil,

Thanks for mentioning on grid_elastic_columns option, since we have one column with a dynamic width we must not use this. However, whether it is on or off we still can not move the resizer bar on touch device which is the main issue.

We are OK with the grid being fixed and not stretched if the resizer goes beyond it on both desktop and mobile.

Still, we still cannot move the resizer on touch device as if we cannot drag it.

We opt to set gantt.config.autosize = 'xy' on touch device with the width of the grid and the Gantt chart are OK as it is on Desktop. However, we want user to be able to drag/move the resizer bar adjusting the view of which they want to see more or close.

In addition, I find out that a class name gantt_noselect is being added to body while dragging the resizer bar which was not added in our case here. when I dragged on it, I can see the body was glowing for a bit but no class had been added so something must have stopped it?

Do you know anything may have prevented us from dragging the resizer?

#4

Hello Oliver,
I can only suggest that you have an old Gantt version that doesn’t have the functionality that allows resizing on mobile devices.
And you need to check that you didn’t disable the touch support:
https://docs.dhtmlx.com/gantt/api__gantt_touch_config.html

Please, try checking if the resizer works on mobile devices in the following sample:
https://docs.dhtmlx.com/gantt/samples/11_resources/09_resource_histogram.html
If it doesn’t work there, please, clarify what device and browser you are using.

#5

Dear Ramil,

We have enabled touch support on mobile device with gantt.config.touch = true. We are using gantt_7.0.8_enterprise.

https://docs.dhtmlx.com/gantt/samples/11_resources/09_resource_histogram.html
I can confirm that it is OK in the demo.

In addition, what seems to be a more serious problem for us is that when we have the following configs
gantt.config.autosize = ‘xy’
gantt.config.touch = true

The touch support prevents us from scrolling both vertically and horizontally by swiping on the mobile screen. We can only scroll when disable touch support but then we aren’t able to add task by tapping. Please let us know if we are missing something? Could we have touch support on because it is essential but still be able to scroll anywhere in the screen? Below are all configs we have on mobile

gantt.config.autosize = 'xy'
      gantt.config.touch = false
      gantt.config.touch_tooltip = true
      gantt.config.prevent_default_scroll = true
      gantt.config.preserve_scroll = false
      gantt.config.grid_resize = false
      gantt.config.autoscroll = false
      gantt.config.drag_move = false
      gantt.config.drag_progress = false
      gantt.config.drag_resize = false
      gantt.config.drag_links = false
#6

Hello Oliver,
When I open the following snippets on a PC with the device emulation, I confirm that the scroll doesn’t work there:
https://snippet.dhtmlx.com/5/a2c1489fc
http://snippet.dhtmlx.com/5/ecfbc51a8
But if I open it on a mobile device in Chrome (Android), the scroll works correctly.

When you enable the autosize option, Gantt expands its container, so you can no longer scroll it, you need to scroll the page. On a mobile device, I use the 2-fingers gesture, and it works correctly. If nothing changed, the dev tools don’t support multitouch gestures.

#7

Below are the events we would like to differ in real mobile devices with the gantt.config.touch = true.

  • Trigger the tooltip (hover on desktop)
  • Trigger a click event to open edit modal
  • Be able to scroll

Trigger the tooltip (hover on desktop)
1st time: This is good when I tapped on 1 task and hold it for the first time, to close the tooltip I clicked on another task. However, it seems to not work the 2nd time on? it’s either becomes a multi-selection or the tooltip showed up then closed in 1 second.

Be able to scroll
We can scroll on either grid/gantt layout by swiping 2 fingers now. This is correct as you described. However, it also triggered a click event the moment the second finger touched on the screen before I swiped. Could it be improved or how exactly should I do this?

Trigger a click event to open edit modal
This is good when tapping a task twice.

#8

Hello Oliver,

Trigger the tooltip (hover on desktop)
1st time: This is good when I tapped on 1 task and hold it for the first time, to close the tooltip I clicked on another task. However, it seems to not work the 2nd time on? it’s either becomes a multi-selection or the tooltip showed up then closed in 1 second.

I don’t see that the tooltip is working on a mobile device. I checked the following sample on a desktop and a smartphone with Android:
https://docs.dhtmlx.com/gantt/samples/02_extensions/02_tooltip.html
But we are aware of the issue that if a task is selected and you long-tap on another task in the grid, the second task is also highlighted. It is not a multiple selection, the task is only highlighted, it something like the hover event. The dev team will fix that issue in the future, but I cannot give you any ETA.

Be able to scroll
We can scroll on either grid/gantt layout by swiping 2 fingers now. This is correct as you described. However, it also triggered a click event the moment the second finger touched on the screen before I swiped. Could it be improved or how exactly should I do this?

I guess it doesn’t work in a different way when you scroll with a single tap. If you try scrolling Gantt while the finger starts the drag position over a task in the grid, the reorder drag will activate. If you finish the gesture over a task over a task in the grid, it will work the same way.
If you zoom in or out via the two-fingers gesture, sometimes Gantt opens the lightbox because of the tap events.

A proper way for gestures would be to avoid task elements. It may not be easy on small screens, so, it is better to increase the zoom. Or you can show some overlay before starting scrolling Gantt so that you won’t accidentally touch draggable objects.
Here is an example of how it can be implemented:
http://snippet.dhtmlx.com/5/6aafc29fd
Unfortunately, I don’t have a better solution for that.

Trigger a click event to open edit modal
This is good when tapping a task twice.

I think it already works that way out of the box.
Please, clarify what you actually need and how it should be different from the desktop behavior.

#9

Hello Oliver,
The bug with the highlight seems to be fixed in the 7.1 version, as I cannot reproduce double highlight in the following sample:
https://docs.dhtmlx.com/gantt/samples/07_grid/10_scrollable_grid.html