[REACT] Programmatically collapse and/or drag splitter

[damir]

Is there a way to programmatically collapse and / or drag the splitter that separate the Gantt with grid?

[mats]

Sure:

gantt.subGrids.locked.collapse()

or

gantt.subGrids.locked.expand()

[damir]

Awesome, works fine, thanks!

Is there anyway to drag left and right?

Since I have two gantt on the page, and I want that when one is dragged also the other follow the same.

[mats]

Just set width to the region programmatically:

gantt.subGrids.locked.width = 300;

Or perhaps you could use the partner concept if you're viewing the same date range?

[damir]

Thanks, will try with width.

At the moment we are not using partner, since we load even more than 2 projects and different date range, and as I understand partner can handle max 2.

[damir]

Works fine setting width. A bit more hard was to sync the collapse/expand since there are just two events that I found, but in the end it seems to works.

Thanks for your tips.

Code:

			gantt.on({
				thisObj: gantt,
				splitterCollapseClick: ({ source }: { source: GanttInstance }) => {
					ganttInstances.forEach((gantt) => {
						if (gantt.project.id !== source.project.id) {
							if (!gantt.subGrids.locked.collapsed && !gantt.subGrids.normal.collapsed) {
								// The splitter is in the middle, collapse grid
								gantt.subGrids.locked.collapse();
							} else if (gantt.subGrids.normal.collapsed) {
								// The gantt is collapsed, expand it
								gantt.subGrids.normal.expand();
							}
						}
					});
				},
				splitterExpandClick: ({ source }: { source: GanttInstance }) => {
					ganttInstances.forEach((gantt) => {
						if (gantt.project.id !== source.project.id) {
							if (!gantt.subGrids.locked.collapsed && !gantt.subGrids.normal.collapsed) {
								// The splitter is in the middle, collapse gantt
								gantt.subGrids.normal.collapse();
							} else if (gantt.subGrids.locked.collapsed) {
								// The grid is collapsed, expand it
								gantt.subGrids.locked.expand();
							}
						}
					});
				},
				splitterDragEnd: ({ source }: { source: GanttInstance }) => {
					ganttInstances.forEach((gantt) => {
						if (gantt.project.id !== source.project.id) {
							gantt.subGrids.locked.width = source.subGrids.locked.width;
							gantt.subGrids.normal.width = source.subGrids.normal.width;
						}
					});
				},
			});

[marcio]

Thanks for sharing the solution here in the forums damir!