Fixed column width on resizeable grid

Gantt
#1

Hi,

I use in my project resizeable grid.

gantt.config.grid_resize = true;

In the grid, there are some square small columns with icons and the tree column with text.

I would like to configure the grid so the square icon columns would have fixed width, while the tree column should fill rest of the line. Using the column configuration using gantt.config.columns, I can only achieve initial sizes correctly. But when the user resizes the grid, the icon areas are stretched proportionally, which is not what I want. I need the tree area to be as wide as possible.

Is it possible to configure gantt like this? See the attachment.

My column configuration is following:

[code]gantt.config.columns = [ {
name : “selection”,
label : “”,
align : “center”,
width : 25,
resize: false,
template : selectorTemplate
}, {
name : “text”,
label : “Task”,
tree : true,
width : ‘*’

}, {
name : “exAdditionalInfo”,
label : “”,
align : “center”,
tree : false,
width : 25,
resize: false,
}, {
name : “exOutOfTimeline”,
label : “”,
align : “center”,
width : 25,
resize: false,
template: outOfTimelineTemplate
}, {
name : “exStatus”,
label : “”,
align : “center”,
width : 25,
resize: false,
template: statusTemplate
}];[/code]

#2

Hello,

To allow changes a width of certain columns, you need to add ‘resize:true’ property to these column at ‘gantt.config.columns’.
docs.dhtmlx.com/gantt/snippet/1890c2d0

#3

Hello Polina, thank you for your answer.

Your solution does not exactly solve my problem. It is important, that I use gird_resize feature. So user is able to resize grid by dragging the main splitter line between gantt and grid area.

gantt.config.grid_resize = true;

I am not allowing the user to drag splitter between columns in grid header. So I set resize = false for all columns (or is not set, which has same effect).
But yes: I want my grid to behave exactly as in your example BUT I want this to happen when using the main split line between grid and gantt area. Not the column splitter in header. When dragging the main splitter, all columns should remain at same width except the one stretchable column, which takes all the remaining space.

Btw. your tool to create code snippets is cool, can I create and share my own snippet to represent the problem? :slight_smile:

#4

Hello again,

Thank you for clarification. If I understood you correctly, this sample will help you to solve the issue.
docs.dhtmlx.com/gantt/snippet/c7add5be

It requires to save columns width before resizing grid and then set these values again.

#5

Thank you Polina, this is exactly what I needed! :slight_smile:

I would add just one small improvement: Width of the “resizeable” column could be set as difference between total grid width and sum of all fixed column widths. So the grid splitter stays resized to position, where the user dropped it. :wink:

#6

Yes, you are right.
I fixed it and replaced the link after 2 minutes, but you have noticed the first option. :wink: