Kendo DropDownList MVVM Binding Default Value Error

Question

I have the following kendo dropdownlist:

<div class="slds-form-element" id="eventSubjectItem" style="text-align: center;">
                    <label class="slds-form-element__label" for="eventSubjectContainer" style="color: white; font-size: 15px;">Choose Event Field To Be Used To Label Event:</label>
                    <div id="eventSubjectBorder" style="border-top: 2px solid #f48942;"></div>
                    <div class="slds-form-element__control">
                        <div id="eventSubjectContainer">
                            <input data-role="dropdownlist" id="eventSubject" data-text-field="commonName" data-value-field="apiName" data-bind="source: eventFields, value: selectedField" style="margin-top: 10px; margin-bottom: 15px;"/>
                        </div>
                    </div>
                </div>

Then my observable binding in javascript:

eventSubjectObservable = kendo.observable({
                    selectedField: '{!orgEventLabel}',
                    eventFields: allEventFields,
                    eventLabelChange: function(){
                        console.log(this.get('selectedField'));   
                    }
                });
kendo.bind($('#eventSubject'), eventSubjectObservable);

When trying to add 'events: {change: eventLabelChange}' to data-bind in my html dropdownlist element, I get handler is not defined error, when it obviously is (funny thing is, I have another dropdownlist with the same kind of binding on this page that works perfectly fine with a change event...).

Also... I cannot get a default value. I have tried setting the dropdownlist value directly outside of the observable after binding then triggering the change event, but nothing happened.

When commonName = 'Subject' and apiName = 'Subject' and I do dropdownlist.data('kendoDropDownList').value('Subject') it has -1 index because it cannot find an item with that value, even though there is obviously one there... I really don't get what is happening with this binding.

Does anyone know how I can set the default value when the text and value fields are not integers and are strings instead? It is apparently unable to just figure out the string passed to value() is the same value as one of its items...

Answer 1

Use event binding and bind change to eventLabelChange method. Also add attribute as data-auto-bind=true

<input data-role="dropdownlist" id="eventSubject" data-text-field="commonName" data-value-field="apiName" data-bind="source: eventFields, value: selectedField, events:{change:eventLabelChange}" data-auto-bind="true" style="margin-top: 10px; margin-bottom: 15px;"/>