Hi all,
We have an app that updates the resources fairly frequently. We'd also like to introduce filtering which happens even more frequently, as a result of scrolling horizontally.
Right now we're just doing the filtering by updating the resources each time. It doesn't give the best visual experience. We'd like to take advantage of one of the store filtering capabilities, but we're getting an error now.
When we replace resources after a filter has been applied, an error is thrown.
Is this a defect or are we doing something incorrectly when updating resources?
Is there a better way both to frequently update resources and even more frequently update filtering?
Thanks in advance
PFA code and error, as well as attached sample project
schedulerpro.module.js:27404 Uncaught Error: Id collision on 1647071313
at ResourceStore.register (schedulerpro.module.js:27404)
at ClassDefEx.joinStore (schedulerpro.module.js:19045)
at ClassDefEx.joinStore (schedulerpro.module.js:101563)
at schedulerpro.module.js:19052
at Array.forEach (<anonymous>)
at ClassDefEx.joinStore (schedulerpro.module.js:19052)
at ClassDefEx.joinStore (schedulerpro.module.js:101563)
at schedulerpro.module.js:15738
at Array.forEach (<anonymous>)
at schedulerpro.module.js:15736
import "./styles.css";
import { Scheduler } from "bryntum-schedulerpro";
const startDate = new Date(2000, 0, 1);
const endDate = new Date(2099, 11, 31);
const loadSchedule = (): Scheduler => {
const resources1 = [
{
id: "3641498532",
},
{
id: "4267863040",
children: [
{ id: "1647071313", isLeaf: true },
{ id: "3646210285", isLeaf: true },
{ id: "3208243311", isLeaf: true },
{ id: "2595346736", isLeaf: true },
],
},
];
const resources2 = [
{
id: "3641498532",
children: [
{
id: "1328119367",
children: [{ id: "1835169214", isLeaf: true }],
},
],
},
{
id: "4267863040",
children: [
{ id: "1647071313", isLeaf: true },
{ id: "3646210285", isLeaf: true },
{ id: "3208243311", isLeaf: true },
{ id: "2595346736", isLeaf: true },
],
},
];
const scheduler = new Scheduler({
appendTo: document.getElementById("scheduler"),
minHeight: "600px",
eventColor: null,
eventStyle: null,
startDate,
endDate,
features: {
timeRanges: {
showHeaderElements: false,
},
tree: true,
regionResize: true,
},
rowHeight: 60,
barMargin: 5,
columns: [
{
type: "tree",
text: "Name",
width: 220,
field: "name",
},
],
viewPreset: "weekAndMonth",
});
const resourceStore = scheduler.resourceStore;
resourceStore.setConfig({ tree: true });
const filter = (resourceIds: Set<string>) =>
resourceStore.filter({
filters: (r: any) => {
return resourceIds.has(r.id);
},
replace: true,
});
filter(new Set(["3641498532", "4267863040"]));
resourceStore.beginBatch();
resourceStore.removeAll();
resourceStore.rootNode.appendChild(resources1 as any);
resourceStore.endBatch();
filter(new Set(["3641498532", "4267863040"]));
resourceStore.beginBatch();
resourceStore.removeAll();
resourceStore.rootNode.appendChild(resources2 as any);
resourceStore.endBatch();
return scheduler;
};
let scheduler: Scheduler;
window.addEventListener("load", () => {
scheduler = loadSchedule();
});