Kendo UI - Bind radio buttons to viewModel using MVVM

Kendo UI - Bind radio buttons to viewModel using MVVM

by Rahul Gupta

HTML

<base href="http://demos.telerik.com/kendo-ui/styling/radios">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.metroblack.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.metroblack.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>

<div id="example">
    <div class="demo-section k-content">
          
    <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"...

JavaScript

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