Strange behaviour when resizing columns

Gantt
#1

Hello.

I’m trying to resize dynamically my grid columns, according to a maximum grid width.
My idea is to set min_width, and no width, so the gantt should resize all columns with the same size.
For example with grid width = 500, if i have 10 columns, i expect all columns to have 50px.

It doesn’t work because it looks like there are some hardcoded values : the second column is always 100px, the third column is always 70px, and all other columns change dynamically.

you can see what i mean in this snippet : DHTMLX Snippet Tool
you can change the number of columns, reorder them, you’ll always have 2 hardcoded column values with 100 and 70 in 2nd and 3rd position

I don’t understand why

#2

Hello,

Yes, you’re right — by default, Gantt applies hardcoded widths to the 2nd and 3rd grid columns if the width property is not explicitly set. That’s why those columns don’t resize dynamically like the others.

To make all columns resize evenly according to grid_width, you need to explicitly set the width for each column. Here’s an example:

const resizeColumnsEvenly = () => {
	const gridWidth = gantt.config.grid_width;
	const columnCount = gantt.config.columns.length;
	const columnWidth = Math.floor(gridWidth / columnCount);

	gantt.config.columns.forEach(col => {
		col.width = columnWidth;
		col.min_width = columnWidth;
	});

	gantt.render();
};

gantt.attachEvent("onDataRender", function () {
	resizeColumnsEvenly();
});

Demo: DHTMLX Snippet Tool