Cannot enable resizing of Gantt grid and columns

Gantt
#1

I am using the Gantt standard edition v5.1.0 and would like to enable the feature for users to resize the grid and its columns. But when I set the resize config options, the resizing widget does not appear. Can someone explain what I am doing wrong. Below is the code that reproduces the problem.

1 Like
#2

Hi Mark,

At present time gantt.config.grid_resize is deprecated (maybe in future we will add it again, maybe not).
As an alternative way please use the gantt.config.layout instead and specify grid and resizer configurations with the necessary values.
Here is a demo, check how it works: snippet.dhtmlx.com/2215e31e9

#3

Thank you for the suggestion. However, when I tried it in my environment it did not work. The difference appears to be the dhtmlxgantt versions. In the code snippet you used 5.1.2 from the cdn which the license at the top of the file says can only be used on the dhtmlx.com site. I am using the standard (open source GPL v2 license) version 5.1.0 files which I downloaded using the following link dhtmlx.com/x/download/regular/dhtmlxGantt.zip.
Is there an alternative location where I should be downloading the 5.1.2 version?

#4

{ resizer: true, width: 1 } inside grid.config.layout didn’t work for me as well. Also, my code already had these properties set, but nothing changes with them.

#5

Hello,
Yes, resizing works only in Pro versions. You can download the released 5.2 version if you follow that link. But the Standard version doesn’t have resizing feature.
Please check the following snippet that demonstrates how to dynamically resize the grid in the Standard version:
snippet.dhtmlx.com/b1215d291
Using it you can create your own solution.

#6

how to do with mouse resize cursor, please?

#7

Hello,
When the mouse is over the resize elements, the cursor style changes:
https://files.dhtmlx.com/30d/eaa7e9fe5ce7d82cc8705e8bf6bfdd5e/vokoscreen-2024-06-26_13-08-45.mp4

If you want to show a different cursor, you need to change the cursor style rule:

If you want to keep the resize cursor until the resize is complete, you need to modify the style rules. And the easiest way to do that is to use the onColumnResizeStart, onGridResizeStart, onColumnResizeEnd, and onGridResizeEnd events:
https://docs.dhtmlx.com/gantt/api__gantt_oncolumnresizestart_event.html
https://docs.dhtmlx.com/gantt/api__gantt_oncolumnresizeend_event.html
https://docs.dhtmlx.com/gantt/api__gantt_ongridresizestart_event.html
https://docs.dhtmlx.com/gantt/api__gantt_ongridresizeend_event.html

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/nziv2xe6

#8

How can I solve without using these tools? these tools need to be paid.

#9

Can you solve this problem now?

#10

Hello,

You can implement this yourself by handling standard mouse events: mousedown, mousemove, and mouseup. The idea is to detect when the mouse is near the right edge of a grid header cell, change the cursor accordingly, and track dragging to resize the column and the grid width dynamically.

Here’s an example of how it can look:

const ganttContainer = gantt.$root;

let isResizing = false;
let startX = 0;
let startWidth = 0;
let targetColumnName = null;

const edgeThreshold = 5;

ganttContainer.addEventListener('mousemove', (event) => {
	const targetCell = event.target.closest('.gantt_grid_head_cell');

	if (isResizing && targetColumnName) {
		const dx = event.clientX - startX;
		const column = gantt.getGridColumn(targetColumnName);

		column.width = startWidth + dx;
		gantt.config.grid_width += dx;

		startX = event.clientX;
		startWidth = column.width;

		gantt.render();
		return;
	}

	if (targetCell) {
		const rect = targetCell.getBoundingClientRect();
		const offsetX = event.clientX - rect.left;
		const newCursor = (rect.width - offsetX <= edgeThreshold) ? 'e-resize' : '';
        
		if (targetCell.style.cursor !== newCursor) {
			targetCell.style.cursor = newCursor;
		}
	}
});

ganttContainer.addEventListener('mousedown', (event) => {
	const targetCell = event.target.closest('.gantt_grid_head_cell');
	if (!targetCell) return;

	const rect = targetCell.getBoundingClientRect();
	const offsetX = event.clientX - rect.left;

	if (rect.width - offsetX <= edgeThreshold) {
		isResizing = true;
		startX = event.clientX;
		startWidth = rect.width;
		targetColumnName = targetCell.dataset.columnName;

		event.preventDefault();
	}
});

document.addEventListener('mouseup', () => {
	if (isResizing) {
		isResizing = false;
		targetColumnName = null;
	}
});

You can try the working demo here: DHTMLX Snippet Tool . Please note, this is not a complete solution. It needs further development and testing, but you can use it as a base.