[ANGULAR] Cannot read property 'preventHighlight' of undefined

[SHQK]

I handle listeners combobox change to change text of another field,
But sometime, when open event editor, I got this error

        this.calendarConfig.features.eventEdit.items.myTabs.items.firstTab.items.selectionField.listeners.change = ({ value, source }) => { 
                this.services.forEach(element => {
                    if (source.parent.widgetMap.selectionField.inputValue == element.name) {
                        source.parent.widgetMap.textField.value = element.servicesName;
                    }
                }) 
        }

[saki]

You shouldn't install the listener that way at runtime. You can add them at configuration time inline, but you should call https://bryntum.com/docs/scheduler/#Core/mixin/Events#function-addListener (or its synonym on) to install the listener on an existing component; sectionField in this time.

In any case, the runnable showcase will be helpful and fastest. Then we could run, investigate and debug it and advise the best solution.

[SHQK]

You shouldn't install the listener that way at runtime. You can add them at configuration time inline, but you should call https://bryntum.com/docs/scheduler/#Core/mixin/Events#function-addListener (or its synonym on) to install the listener on an existing component; sectionField in this time.

In any case, the runnable showcase will be helpful and fastest. Then we could run, investigate and debug it and advise the best solution.

I need parameter "source" to change value for some field,
And this bug happen in line 4 when I using "source.parent.widgetMap" to set value for field that I need to change value

[SHQK]

I have the code snippet as below:
Please describe to me more detail the best way that I should install listener event onChange() of selectionField

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { BryntumCalendarComponent } from '@bryntum/calendar-angular';
import { Calendar, EventModel, EventStore, MessageDialog } from '@bryntum/calendar/calendar.lite.umd.js';
import { calendarConfig } from './app.config';

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html'
})
export class AppComponent implements AfterViewInit {
    @ViewChild(BryntumCalendarComponent) set content(content: BryntumCalendarComponent) {
        if (content) {
            this.calendar = content.instance;
            this.eventStore = this.calendar.eventStore;
            this.bindEventListeners(this.calendar);
        }
    }

calendarComponent: BryntumCalendarComponent;
private calendar: Calendar;
private eventStore: EventStore;

// calendar configuration
calendarConfig = calendarConfig;

bindEventListeners(calendar: Calendar): void {
    calendar.onBeforeEventEditShow = ({ editor, eventRecord }) => {}
    calendar.onAfterEventSave = () => {}
    calendar.onBeforeEventDelete = ({ eventRecords, context }) => {}
}

ngOnInit(): void{}

ngAfterViewInit(): void {}

export const calendarConfig = {
    features: {
        eventEdit:  {
            items: {   

                myTabs : {
                    type  : 'tabpanel',
                    items : {
                        firstTab : {
                            title : 'Detail',
                            items: {
                                selectionField: {
                                    label: "Select a Option",
                                    name: 'selectionField',
                                    type: 'combo',
                                    items: [{ value: 0, text: ''}],
                                    required: true,
                                    editable: false,
                                    listeners: {
                                        change: ({ value, source }) => {},
                                    } 
                                },
                                textField: {
                                    type: 'number',
                                    label: "Text",
                                    readOnly: true,
                                    name: "text"   ,
                                    value: 0                             

                                }
                            }
                        },
                        secondTab : {
                            title : 'Second Tab'
                        }
                    }
                },
            }
        },
    }
};

[saki]

The matter is a little bit more complicated by the fact that the combo is not created until the editor is displayed for the first time so that we also need to wait with the installation of the listener until then. We need the following:

1. Give the selectionField a https://bryntum.com/docs/scheduler/#Core/widget/Widget#config-ref in app.config.ts. Although this is not a must, it'll make accessing it much easier:

   items : {
       selectionField : {
           label    : 'Select a Option',
           name     : 'selectionField',
           type     : 'combo',
           items    : [{ value : 1, text : 'Hello world' }],
           required : true,
           editable : false,
           ref      : 'selectionField'
       },

2. Install the https://bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#event-beforeEventEditShow listener that will run only once in app.component.ts, ngAfterViewInit:

       ngAfterViewInit(): void {
           this.calendar = this.calendarComponent.instance;
           this.eventStore = this.calendar.eventStore;
   
           this.calendar.on({
               beforeEventEditShow : {
                   fn      : this.onBeforeEventEditShow,
                   thisObj : this,
                   once    : true
               }
           });

3. And finally the functions in app.component.ts:

       onBeforeEventEditShow({ editor }) : void {
           const { widgetMap : { selectionField } } = editor;
           selectionField.on('change', this.onSelectionFieldChange);
       }
   
       onSelectionFieldChange({ value, source }) {
           console.log(value, source);
       }

[SHQK]

Thanks Saki,
But I have another issue,
I can not use global variable in onSelectionFieldChange()
For example, i have global variable below

globalVar: string = "Hello"

And then I want to use variable above in onSelectionFieldChange()

    onSelectionFieldChange({ value, source }) {
        console.log("Global Variable: ", this.globalVar)
    }

But it alway undefined

[saki]

It sounds like a JavaScript variable scope problem. Or do you suspect our code?