I found other problem in the
scheduler.eventLayout = 'stack'
My code:
// Change the row height by largest job in this row.
async changeRowHeight(scheduler: Scheduler, ganttId: number) {
setTimeout(() => {
const minHeight = this.findMinHeight((scheduler.eventStore.getRange() as GanttJob[]), ganttId);
// Go over all resources.
scheduler.resourceStore.getRange().forEach((resource: GanttResource) => {
// For each resource find his max height by his jobs.
let maxHeight = this.findMaxJobHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
// Change resource's height.
// Has jobs.
if (maxHeight) {
if (scheduler.eventLayout === 'stack') {
const maxCollisionHeight = this.findMaxCollisionHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
maxHeight = maxHeight > maxCollisionHeight ? maxHeight : maxCollisionHeight;
maxHeight += (scheduler.resourceMargin * 2);
maxHeight += (scheduler.barMargin );
resource.beginBatch();
resource.set('rowHeight', maxHeight);
resource.endBatch();
} else {
maxHeight += (scheduler.resourceMargin * 2);
resource.beginBatch();
resource.set('rowHeight', maxHeight);
resource.endBatch();
}
// Give to resource minimum hieght if no has jobs
} else {
resource.beginBatch();
resource.set('rowHeight', minHeight);
resource.endBatch();
}
});
}, 2);
}
// For resource find his max height by his jobs.
findMaxCollisionHeight(jobs: GanttJob[], ganttId: number): number {
let maxHeigt = 0;
let i = 0;
jobs.sort((job1: GanttJob, job2: GanttJob) => job1.get('startDate').getTime() - job2.get('startDate').getTime());
// Go over the jobs and return the max height.
jobs.forEach((job: GanttJob) => {
if (i < jobs.length - 2) {
const height: number = this.findMaxChainHeight(jobs.slice(i, jobs.length), ganttId);
if (maxHeigt < height) {
maxHeigt = height;
}
i++;
}
});
return maxHeigt;
}
// For resource find his max collision chain height by his jobs.
findMaxChainHeight(jobs: GanttJob[], ganttId: number): number {
console.log(jobs);
const element = (document.querySelector(`.scheduler${ganttId} .id${jobs[0].get('id')}`) as HTMLElement);
let maxHeigt;
if (element) {
maxHeigt = element.getBoundingClientRect().height;
}
if (jobs.length > 1) {
if (jobs[0].get('startDate').getTime() < jobs[1].get('startDate').getTime() &&
jobs[0].get('endDate').getTime() > jobs[1].get('startDate').getTime()) {
return maxHeigt += this.findMaxChainHeight(jobs.slice(1, jobs.length), ganttId);
} else {
return maxHeigt;
}
} else {
return maxHeigt;
}
}
// For resource find his max height by his jobs.
findMaxJobHeight(jobs: GanttJob[], ganttId: number): number {
let maxHeigt: number;
// Go over the jobs and return the max height.
jobs.forEach((job: GanttJob) => {
const element = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement);
if (element) {
const height: number = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement).getBoundingClientRect().height;
if (maxHeigt === undefined) {
maxHeigt = height;
}
if (maxHeigt < height) {
maxHeigt = height;
}
}
});
return maxHeigt;
}
In the scheduler.eventLayout = 'none' all fine.
What i am doing wrong?