Premium support for our pure JavaScript UI components


Post by 24flow »

Hi,

We are encountering an issue with project.applyProjectChanges (and eventStore.applyChangeset) in Bryntum SchedulerPro, which started after upgrading to version 6.x. Currently, we are on version 6.1.0.

Problem Description:
Our application receives change events from our backend to update events in the SchedulerPro. When we use project.applyProjectChanges() with a payload containing updated event data (including new startDate and endDate values in the events: { updated: [...] } part of the changes object), we've observed that the startDate of the event is often not updated in the UI or the store.

Interestingly, if the duration of the event changes, the event bar in the scheduler does resize, indicating that the duration or endDate change is being partially processed. However, the event's startDate remains fixed, and the resizing seems to occur only by adjusting the event's endDate or duration.

Working Workaround (but with concerns):
We've found that if we bypass applyProjectChanges for event updates and instead use a direct store manipulation like:

const eventRecord = scheduler.project.eventStore.getById(eventId);
if (eventRecord) {
    eventRecord.set(updatedEventDataFromBackend); // updatedEventDataFromBackend contains new startDate, endDate etc.
}
await scheduler.project.commitAsync();

This approach correctly updates both the startDate and endDate of the event, and everything functions as expected visually and in the data.

Our Concerns:
While eventRecord.set() works, we are concerned this is not the optimal or intended method for handling many updates, additions, or deletions that come from backend events. applyProjectChanges seems designed for such batch operations. We are unsure if iterating and calling .set() for each change is the most performant way to handle this, especially for larger datasets or frequent updates.


Post by ghulam.ghous »

Hello,

I have tested out the method in our online example and it just worked out as expected https://bryntum.com/products/schedulerpro/examples/inline-data/. So you shouldn't be facing this issue. I have tried the below in console for the above example:

schedulerPro.project.applyProjectChanges({events : { updated : [{ id: 16, name : 'Modified event', startDate : new Date(2022, 2, 23), endDate: new Date(2022,2, 23, 11)}]}})

Have I missed something? Because it updated the dates as expected.


Post by 24flow »

Hello,

We managed to reproduce this in the latest version. See the snippet below:

We see a couple of interesting things:

  • Our "project sync" (e.g., using project.applyProjectChanges()) updates events initially. However, after an event is manually dragged & dropped, "project sync" no longer updates that specific event's dates.
  • If we use an "event sync" (e.g., eventRecord.set()) on an event, subsequent "project sync" calls also fail to update that event.

It seems UI interactions or direct set() calls prevent project.applyProjectChanges() from working correctly on those events afterwards.

const schedulerPro = new SchedulerPro({
	appendTo: "container",
	startDate: "2022-03-23",
	endDate: "2022-03-24",
	viewPreset: "hourAndDay",
	forceFit: true,
	columns: [
		{
			type: "resourceInfo",
			text: "Name",
			field: "name",
			showEventCount: false,
			width: 150,
		},
		{ type: "vehicleconditioncolumn" },
	],

project: {
	resources: data.resources,
	events: data.events,
	assignments: data.assignments,
	dependencies: data.dependencies,

	autoLoad: false,
	autoSync: false,
},
});

let projectSync = true;
setInterval(async () => {
	const updatedEvents = schedulerPro.project.eventStore.records.map(
		(event) => ({
			id: event.id,
			resourceId: event.resourceId,
			name: event.name,
			startDate: new Date(event.startDate.getTime() + 1000 * 60 * 10),
			endDate: new Date(event.endDate.getTime() + 1000 * 60 * 10),
		})
	);

if (projectSync) {
	console.log("project sync");

	await schedulerPro.project.applyProjectChanges({
		events: { updated: updatedEvents },
	});
	await schedulerPro.project.commitAsync();
	schedulerPro.project.acceptChanges();

	// projectSync = false;
} else {
	console.log("event sync");

	updatedEvents.forEach((event) => {
		const ev = schedulerPro.project.eventStore.records.find(
			(e) => e.id === event.id
		);
		if (ev) {
			ev.set(event);
		}
	});
	await schedulerPro.project.commitAsync();
	schedulerPro.project.acceptChanges();

	// projectSync = true;
}
}, 2000);


Post by ghulam.ghous »

Thanks for the details, I was able to reproduce the issue and opened a ticket here: https://github.com/bryntum/support/issues/11384


Post Reply