I’m using Bryntum Scheduler Pro in “vertical” mode and rendering a custom header for each resource. I want to display the number of events (assignments) in the header. On initial load the count is correct, but it never updates when I add, remove, or change assignments. The only way I can get it to update is by triggering another action that forces the header to re-render (e.g. toggling driver visibility).
Environment
• Scheduler Pro (version 6.0.6)
• Browser: Chrome 115, Firefox 116
• Framework: React 18
Scheduler Configuration:
{
mode: "vertical",
rowHeight: 64,
barMargin: 4,
eventStyle: 'border', //'colored', 'plain'|'border'|'colored'|'hollow'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|
viewPreset: {
base: "hourAndDay",
tickHeight: 80,
tickWidth: 200,
timeResolution: {
unit: 'minute',
increment: 5,
},
headers: [
{
unit: 'day',
dateFormat: 'MM/DD/YYYY',
},
{
unit: 'minute',
dateFormat: 'HH:mm A',
increment: 30
},
],
},
resourceColumns : {
height: 48,
headerRenderer : SchedulerConfig.headerDriverRenderer,
columnWidth : 200,
fillWidth : false,
},
eventRenderer: (detail) => eventRenderer(detail.eventRecord, detail.renderData as EventRenderData, context, detail.scheduler),
}Custom Header Renderer:
public static headerDriverRenderer = ({
resourceRecord,
elementConfig,
}: {
resourceRecord: SchedulerResourceModel;
elementConfig: DomConfig;
}): string => {
const driver = resourceRecord as ResourceModel as IDriver;
elementConfig.elementData = driver;
const avatarRendering = new AvatarRendering();
const resourceAvatar = avatarRendering.getResourceAvatar(driver as ResourceModel);
(resourceAvatar as { style: string }).style = `border: 2px solid ${driver.color}; width:32px; height:32px;`;
const domDriverAvatar = DomHelper.createElement({
children: [resourceAvatar],
}) as HTMLElement;
elementConfig.children = [resourceAvatar];
const grayscaleClass = isHiddenDriver(resourceRecord.id as string) ? "grayscale" : "";
const htmlReturn = `<div class="b-resource-info ${grayscaleClass}" role="presentation">
${domDriverAvatar.innerHTML}
<dl class="${grayscaleClass}" role="presentation">
<dt class="${grayscaleClass}" role="presentation">${driver.name}</dt>
<dd class="${grayscaleClass}" style="white-space: wrap;" role="presentation">${driver.truck?.name ? driver.truck.name : ""}</dd>
</dl>
<dl class="b-resource-info-count ${grayscaleClass}" role="presentation">
// HERE COUNTS
<dt style ="border-color: ${driver.color}; background-color:${driver.color}" class="${grayscaleClass}"
role="presentation">${resourceRecord.events.length }</dt>
</dl>
<button class="driver-menu-btn" type="button"><i class="b-fa b-fa-fw b-fa-ellipsis-vertical"></i></button>
</div>`;
return htmlReturn;
};so I'm getting counts like this:
<dt style ="border-color: ${driver.color}; background-color:${driver.color}" class="${grayscaleClass}" role="presentation">${resourceRecord.events.length }</dt>
Any ideas how to fix these issue
!