Hey there.
We're working with Bryntum Scheduler on an Angular 8 project.
We have a requirement, to Auto-Resize a specific Resource Height automatically in 2 cases:
1. When the Text inside an Event Text is taking more than predefined height (see sketch 1).
2. When there are parallel jobs that are one on top of the other (see sketch 2).
The height of the resource should be bigger for those specific resources only.
Is it possible somehow using the current options? So far we've figured out how to change the RowHeight property which affects ALL the resources, which doesn't fit our requirement.
Please suggest a solution.
The screenshot is from our old version (Windows Forms), but illustrates the solution we need.
Support Forum
#2 works out of the box. You can see it here: https://bryntum.com/examples/scheduler/basic/, just drag some events to one resource.
For #1 I have created a feature request here: https://github.com/bryntum/support/issues/489
You could also implement it yourself as there is a property to set: rowHeight on individual rows. You would only need to calculate the correct height at then set it by assigning the new new value to this property.
For #1 I have created a feature request here: https://github.com/bryntum/support/issues/489
You could also implement it yourself as there is a property to set: rowHeight on individual rows. You would only need to calculate the correct height at then set it by assigning the new new value to this property.
After I changed the row height like as you say i got a problem in all changed resources the event's translate didn't change.(all events go up).
After store update i do this
My code:
How can i solve it?
After store update i do this
My code:
async changeRowHeigt(scheduler: Scheduler, ganttId: number) {
this.storeService.getApplicationParametersPromise().then((applicationParameters: IApplicationParametersDTO[]) => {
setTimeout(() => {
if (scheduler.eventLayout === 'mixed') {
scheduler.resourceStore.getRange().forEach((resource: GanttResource) => {
const maxHeight = this.findMaxJobHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
if (maxHeight) {
resource.beginBatch();
resource.set('rowHeight', maxHeight);
resource.endBatch();
this.changeJobsPosition(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
}
});
}
}, 20);
scheduler.renderRows();
this.changeResourcesStyle((scheduler.resourceStore.getRange() as GanttResource[]), applicationParameters);
});
}
findMaxJobHeight(jobs: GanttJob[], ganttId: number): number {
let maxHeigt: number;
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 < height && maxHeigt) {
maxHeigt = height + 5;
} else {
maxHeigt = height + 5;
}
}
});
return maxHeigt;
}
- Attachments
-
- rowHeight.png (51.4 KiB) Viewed 2352 times
I have this css:
because the data inside the event didn't change the event size.
My event renderer:
After i delete this css i got what in the picture.
How can i make the event to be in the size of his content?
::ng-deep .b-sch-event {
height: fit-content !important;
opacity: 1 !important;
overflow: visible;
}
My event renderer:
eventRenderer: (event: { eventRecord: GanttJob, resourceRecord: ResourceModel, tplData: object }) => {
return `
<div class="job-data" style="text-align:${event.eventRecord.get('textAlign')}; direction:${event.eventRecord.get('direction')};>
<div style="font-size:${event.eventRecord.get('fontSize')}rem;">
<span class="mat-icon notranslate material-icons mat-icon-no-color" style="width: unset; height: unset;font-size:100%; min-width:unset; min-height:unset;display:${event.eventRecord.get('link')};">
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" width="0.7rem" height="0.7rem" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>
</span>
<span class="mat-icon notranslate material-icons mat-icon-no-color" style="width: unset; height: unset; font-size:100%;min-width:unset;min-height:unset;display:${event.eventRecord.get('lock')};">
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" width="0.7rem" height="0.7rem" viewBox="0 0 24 24"><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /></svg>
</span>
${event.eventRecord.get('id')}
${event.eventRecord.name}
</div>
<div style="font-size:${event.eventRecord.get('fontSize') * 0.8}rem;">
${this.changeTextToHtmlFormat(event.eventRecord.get('description'))}
</div>
</div>`;
}
How can i make the event to be in the size of his content?
- Attachments
-
- 2.png (25.81 KiB) Viewed 2349 times
/* text wrapping */
.b-sch-event {
white-space:normal;
}
.b-sch-event-wrap {
height: auto !important;
}
.b-sch-event-wrap {
height: auto !important;
min-height:40px;
}