Premium support for our pure JavaScript UI components


Post by 24flow »

Hi,

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:formatted:38929:23".

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
Schermafbeelding 2022-11-15 om 17.50.26.png (126.7 KiB) Viewed 378 times
Schermafbeelding 2022-11-15 om 17.50.08.png
Schermafbeelding 2022-11-15 om 17.50.08.png (1.08 MiB) Viewed 378 times
Schermafbeelding 2022-11-15 om 17.48.53.png
Schermafbeelding 2022-11-15 om 17.48.53.png (174.57 KiB) Viewed 378 times

Post by alex.l »

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?

All the best,
Alex


Post by 24flow »

No we are typing in the field to search in the options of the dropdown. So when we press a key the error appears.


Post by alex.l »

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.

            columns: [
                {
                    text: 'Production line',
                    width: 150,
                    field: 'name'
                },
                {
                    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}
                }
            ],
Attachments
Screen Recording 2022-11-21 at 17.52.03.mov
(8.57 MiB) Downloaded 31 times

All the best,
Alex


Post by 24flow »

Hi Alex,

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
Schermafbeelding 2022-11-22 om 09.45.22.png (315.31 KiB) Viewed 335 times

Post by alex.l »

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);
}
}

All the best,
Alex


Post by Maxim Gorkovsky »

Reproduced, ticket opened here: https://github.com/bryntum/support/issues/5635 Thank you for report.

I'll publish workaround in the ticket description


Post Reply