Kendo Radio Button Bound Observable Not Updating Value When Change Is Made

Question

The html of my radio buttons is:

<div class="slds-form-element" style="text-align:center;">
    <div id="radio-wrapBorder" style="border-top: 2px solid #f48942;"></div> 
    <label class="slds-form-element__label" for="radio-wrap" style="color: white; font-size: 15px; margin-top: 5px;">Allow Users To Control Their Drag And Drop Settings:</label>             
    <div class="slds-form-element__control">
        <div id="radio-wrap">
            <input type="radio" class="k-radio" id="radioDisableDragDrop" value="DisableAll" name="radioGroup" data-bind="checked: radioDragDrop" style="margin-top: 5px; margin-bottom: 15px;"/><label for="radioDisableDragDrop" class="k-radio-label" id="radioDisableDragDropLabel" style="color: white;">Drag and Drop <b>DISABLED</b> for all users. This will not show up as an option in user settings.</label><br />
            <input type="radio" class="k-radio" id="radioEnableDragDrop" value="EnableAll" name="radioGroup" data-bind="checked: radioDragDrop" style="margin-top: 5px; margin-bottom: 15px;"/><label for="radioEnableDragDrop" class="k-radio-label" id="radioEnableDragDropLabel" style="color: white;">Drag and Drop <b>ENABLED</b> for all users. This will not show up as an option in user settings.</label><br />
            <input type="radio" class="k-radio" id="radioUserDragDrop" value="EnableUser" name="radioGroup" data-bind="checked: radioDragDrop" style="margin-top: 5px; margin-bottom: 15px;"/><label for="radioUserDragDrop" class="k-radio-label" id="radioUserDragDropLabel" style="color: white;">Drag and Drop determined by user preferences.</label>
        </div> 
    </div>
</div>

And my binding observable is:

var radioObservable = kendo.observable({ radioDragDrop: null });
kendo.bind($('#radio-wrap'), radioObservable);
radioObservable.set('radioDragDrop', 'EnableUser');
console.log(radioObservable);

Where the radio buttons correctly, initially choose whatever I pas into the radioObservable.set() method. However, when I choose a different option, and click save... radioDragDrop remains 'EnableUser'.

Can anyone see what is wrong with this binding that would lead to radioDragDrop not updating when you select a different option of the 3 radio buttons?

Answer 1

I have created a DEMO and the binding of the radio buttons to the observable object seems to be working correctly.

Here is some code snippet:

JS:

var radioObservable = kendo.observable({ radioDragDrop: null });
kendo.bind($('#radio-wrap'), radioObservable);
radioObservable.set('radioDragDrop', 'EnableUser'); //default checked option
//radioObservable.trigger('change');
console.log(radioObservable);

$('#save').click(function () {
  alert('current selected option = ' + radioObservable.get('radioDragDrop'));
});