We are experiencing a new issue with the Scheduler Pro. When we try to search in a column (which worked before release 5.2.2) we get an exception "Cannot read properties of undefined (reading 'length') schedulerpro.lwc.module.min.js:formatted23".
We have checked if it is related to our own logic but we cant find anything. See screenshots.
Attachments
Schermafbeelding 2022-11-15 om 17.50.26.png (126.7 KiB) Viewed 439 times
Schermafbeelding 2022-11-15 om 17.50.08.png (1.08 MiB) Viewed 439 times
Schermafbeelding 2022-11-15 om 17.48.53.png (174.57 KiB) Viewed 439 times
I tried the code from your picture and I see no errors. Am I right that "try to search in a column" means change value of filterField combo?
Are you able to reproduce it with our examples?
Please see video attached. I used your configuration in our examples and I am not able to reproduce the error. We need more context to confirm a bug or give you instructions to fix this.
I understand you want to prove that it works in a vanilla environment but that doesn't help me at all... All i can say is that it worked before release 5.2.2 and we didn't change any code when we upgraded. So, i don't know what changed in this build but the error is coming from the schedulerpro module. In the screenshot you can see where it breaks. We need to fix this asap we are in a production env and this is not getting any progress.
Attachments
Schermafbeelding 2022-11-22 om 09.45.22.png (315.31 KiB) Viewed 396 times
I believe it's very important for you to have it working.
The video attached is done with Salesforce application that we have in our examples with your code snippet applied.
I don't want to prove anything, I just showed I don't see the problem, so can't help you with it now.
I want you share more context, because we cannot fix the problem that we cannot reproduce, unfortunately.
Please share more code, context, so I will be able to reproduce it too, and then confirm a bug and fix it.
Try to reproduce that bug with our LWC examples?
Here is full code of the file I tested on
/* globals bryntum : true */
import { LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import SCHEDULERPRO from "@salesforce/resourceUrl/bryntum_schedulerpro";
import { CALENDARS, EVENTS, RESOURCES, ASSIGNMENTS } from "./data.js";
export default class Schedulerpro_component extends LightningElement {
renderedCallback() {
if (this.bryntumInitialized) {
return;
}
this.bryntumInitialized = true;
Promise.all([
loadScript(this, SCHEDULERPRO + "/schedulerpro.lwc.module.js"),
loadStyle(this, SCHEDULERPRO + "/schedulerpro.stockholm.css")
])
.then(() => {
this.createScheduler();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: "Error loading Bryntum Scheduler Pro",
message: error,
variant: "error"
})
);
});
}
createScheduler() {
const container = this.template.querySelector(".container");
const scheduler = window.schedulerpro = new bryntum.schedulerpro.SchedulerPro({
project: {
calendar: "weekends",
eventsData: EVENTS,
resourcesData: RESOURCES,
assignmentsData: ASSIGNMENTS,
calendarsData: CALENDARS
},
startDate: new Date(2020, 10, 29),
endDate: new Date(2021, 0, 10),
rowHeight: 50,
barMargin: 2,
viewPreset: "weekAndDay",
columns: [
{
text: "Resource",
field: "name",
width: 200
},
{
text : 'resource',
field : 'name',
width : 200,
editor : false,
filterable : {
filterField : {
type : 'combo',
multiSelect : true,
eidtable : true,
valueField : 'name',
displayField : 'name'
},
filterFn : ({ value, record }) => !value?.length || value.includes(record?.name)
},
sortable(r1, r2) {return 0}
}
],
features: {
// Configuring task edit feature adding checkbox
taskEdit: {
items: {
// Adding it to the general tab
generalTab: {
items: {
// field name
showInTimelineField: {
type: "checkbox",
name: "showInTimeline",
// Text is shown to the right of the checkbox
text: "Show in timeline",
// use empty label to align checkbox with other fields
label: " "
}
}
}
}
},
filterBar : true
},
eventRenderer({ eventRecord: task, renderData }) {
if (task.showInTimeline) {
renderData.eventColor = "red";
} else {
renderData.eventColor = "green";
}
return task.name;
}
});
window.timeline = new bryntum.schedulerpro.Timeline({
appendTo : container,
project : scheduler.project
});
scheduler.render(container);
}
}