Bryntum Support Forums

Posted: **Thu Nov 24, 2022 5:23 pm**

Hi, I am currently evaluating the scheduler pro in a trial version and trying to implement a validation feature in the TaskEditor for a custom boolean field. E.g. show an error label and prevent saving. I figured out how to register a change listener on the field and how to show the error message:

                    

                    fixed: {
                        type: 'slideToggle',
                        weigth: 10,
                        label: 'L{Fixed}',
                        name: 'fixed',
                        listeners: {
                            //validate a field and show an error label
                            change(input: any) {
                                const {source, value} = input
                                if (value) {
                                    source.setError("error!!")
                                } else {
                                    source.clearError("error!!")
                                }
                            }
                        }
                    }

After setting the value to true in the UI I can see the error label and I am unable to save which is great. However it seems that the value of the eventRecord is still updated to true (e.g. also when pressing cancel) and in addition when changing the value back to false in the UI and pressing save the eventRecord is not updated (remains true).

What am I doing wrong? Is this the right approach to do the field validation?

Posted: **Fri Nov 25, 2022 3:36 pm**

Hey dalbrxforcam,

For the error, you could add that validation to the slideToggle widget definition, but that's for the organization of your code, this change listener is fine.

Regarding the updates, we don't recommend updating the value directly in the UI because we have the calculations being handled by some listeners that won't be triggered correctly that way. We need to know how the slideToggle widget to understand what could be causing that non-updating. Could you please share that piece of code with us?

Pay attention that setting that error doesn't mean that the field value won't be updated, those are two separate behaviors by default.

Posted: **Fri Nov 25, 2022 9:46 pm**

Hi Márcio,

actually I was using the default slideToggle widget ( https://bryntum.com/products/schedulerpro/docs/api/Core/widget/SlideToggle )

Now I followed your recommendation and moved the code to my own custom widget which extends the default SlideToggle (see below). However the problem still persists

class MySlideToggle extends SlideToggle {
    onChange = (event: any) => {
        const {source, value} = event
        if (value) {
            source.setError("error!!")
        } else {
            source.clearError("error!!")
        }
    };

static get $name() {
    return 'mySlideToggle';
}

static get type() {
    return 'mySlideToggle';
}
}

MySlideToggle.initClass()

            advancedTab: {
                items: {
                    fixed: {
                        type: 'mySlideToggle',
                        weigth: 10,
                        label: 'L{Fixed}',
                        name: 'fixed'
                    }
                }
            },

Posted: **Sat Nov 26, 2022 11:03 am**

Hey,

I created a ticket for investigating the behavior of not updating the value when canceling https://github.com/bryntum/support/issues/5667

I suspect that could be something related to the register, do you have this fixed property in your model?? If not, this could be causing the issue.

Posted: **Sat Nov 26, 2022 9:22 pm**

Thanks for creating the ticket.
Even after configuring a model with the fixed field as below it still does not work

    class MyEvent extends EventModel {
        static get fields() {
            return [
                {name: 'fixed', type: 'boolean', defaultValue: false}
            ]
        }
    }
    

const eventStore = new EventStore({
    data: events,
    modelClass: MyEvent
})

const project = new ProjectModel({
    calendars: calendars,
    resourceTimeRangeStore: resourceTimeRangeStore,
    resourceStore: resourceStore,
    eventStore: eventStore,
    dependencies: dependencies,
    eventModelClass: MyEvent
})

    <BryntumSchedulerPro
            project={project}
            ...

Bryntum Support Forums

[REACT] TaskEditor Custom Field Validation

[REACT] TaskEditor Custom Field Validation

Re: [REACT] TaskEditor Custom Field Validation

Re: [REACT] TaskEditor Custom Field Validation

Re: [REACT] TaskEditor Custom Field Validation

Re: [REACT] TaskEditor Custom Field Validation