I have multiple gantt in the page and I want to set the same timeline range in the view when gantt load.
For this first of all in gantt config via prop I set the start date as oldest start date of all projects and the end date as earliest end date of all projects.
Then I also run gantt.zoomTo with this same dates and zoom level 7:
The result is not exactly as expected, since I am not even able to scroll left and right, it's like when using zoomTo start/end date the gantt timeline time span is fixed. I can only use shift prev/next but the scrollbar doesn't appears.
I see there are several others options, and I would like to know what you suggest.
I am also not sure if is correct to set via config the oldest/earliest start/end date of all projects, the same for all project, even if their start/end is different.
Attached there is also screenshot how it appears.
Screenshot 2024-03-20 144513.png (455.85 KiB) Viewed 377 times
We did not do such tests. It very depends on data and features every instance has.
We never had test cases when user need more than 2 instances in one page. Could you please describe a bit why do you need 10+ Gantt instances on one page?
Hi,
I'm working with Damir on this one so maybe I can explain the use case further.
It started as a bit of a special use case but is quickly evolving. Basically the users want to be able to manage a program of work in a single view, so being able to see each task list and Gantt aligned one above each other and then have the ability to quickly make small changes to one or more schedules.
The idea is to limit the number of projects, as I don't see a practical use case where dozens or hundreds of projects need to be shown at once and practically speaking that is unusable anyway. But it's good to know the limits, and as Damir has mentioned it works nicely up to our expected max projects 10-20 at a time.
// Required styles only for be able to scroll main container
// #container {
// overflow-y: auto;
// }
import { Splitter, WidgetHelper, Gantt, SchedulerPro, ProjectModel } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';
let firstGantt;
Array(3).fill().map(p => {
return new ProjectModel({
calendar : 'general',
transport : { load : { url : Math.floor(Math.random() * 11) < 5 ? '../_datasets/launch-saas.json' : '../_datasets/tasks-workedhours.json' }},
autoLoad : true,
validateResponse : true
})
}).forEach(project => {
console.log('adding project', project.get('name'));
const gantt = new Gantt({
project,
tbar : [
{ type : 'widget', html : 'Zoom:' },
{ ref: 'zoomInButton', icon: 'b-icon-search-plus', tooltip: 'Zoom in', onAction: () => gantt.zoomIn()},
{ ref: 'zoomOutButton', icon: 'b-icon-search-minus', tooltip: 'Zoom out', onAction: () => gantt.zoomOut()}
],
resourceImageFolderPath : '../_shared/images/users/',
appendTo : 'container',
features : {
labels : {
left : { field : 'name', editor : {type : 'textfield'}}
}
},
viewPreset : 'weekAndDayLetter',
columnLines : true,
columns : [
{ type : 'sequence', minWidth : 50, width : 50, text : '', align : 'right', resizable : false },
{ type : 'name', width : 280 },
{ type : 'percent', text : '% Completed', field : 'percentDone', showValue : false, width : 160 },
{ type : 'resourceassignment', text : 'Assigned Resources', showAvatars : true, width : 160 }
],
startDate : '2015-01-01',
endDate: '2030-01-01',
listeners : {
beforeCellEditStart : ({ editorContext }) => editorContext.column.field !== 'percentDone' || editorContext.record.isLeaf
},
autoHeight: true,
});
if (!firstGantt) firstGantt = gantt;
if (firstGantt !== gantt) {
gantt.addPartner(firstGantt);
}
});
I use similar code where the first instance is always the one that others add as partner.
To overcome the problem of too many instances in partnership, I use Intersection Observer API where I add or remove the partner depending if is intersecting (in viewport or not), something like:
new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
// Check if the entry is in the viewport
if (entry.isIntersecting) {
// add partner
} else {
// remove partner
}
});
});
It seems to work pretty much well, it seems that adding/removing the partner is not expensive compared to gain performance using this way.
Another problem that I encounter is with zoom to fit. Since they are partner, all are zoom to fit on the same position (same as master instance). And that make sense. However how to reset the zoom when clicking on zoom to fit? For now I do something like below but it's not really the same timeline as when page load.
