Kendo Template Hack for RadioButtons

Kendo Template does not work properly for RadioButtons, this hack explicitly handle click event for radio buttons and set RadioButton value for the viewmodel

by rmunir

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>

<div id="test" data-bind="source:filingCalendar.OtherAnswers" data-template="radio-template"></div>
<!--<div id="view" data-role="list-view" data-bind="source: filingCalendar.OtherAnswers" data-template="radio-template">
</div>-->
<button class="k-button">Change Data</button> 

<script id="radio-template" type="text/x-kendo-template">
#if(DataType === 'BOOLEAN') {#
<div class="column row">
	<label>#: FilingQuestionId #</label>
</div>
<div>
	<input type="radio" id="#: FilingQuestionId #Yes" name="#: FilingQuestionId #" data-bind="checked:Answer" value="true"/>
	<label>Yes</label>
</div>
<div>
	<input type="radio" id="#: FilingQuestionId #No" name="#: FilingQuestionId #" data-bind="checked:Answer" value="false"/>
	<label>No</label>
</div>
#} else {#
<label>#: Question #</label>
<input type="text" name="#: Question #" id="FilingQuestion_#: FilingQuestionId #" data-bind="value: Answer" />
 #}#
</script>

<script id="checkbox-template" type="text/x-kendo-template">
<input name="#: Question #" id="FilingQuestion_#: FilingQuestionId #" data-bind="value:Answer, checked: Answer" type="checkbox" /><label for="FilingQuestion_#: FilingQuestionId #">#: Question #</label>
</script>

JavaScript

/*
--Kendo Template Hack for RadioButtons--
Kendo Template does not work properly for RadioButtons, this hack explicitly handle click event for radio buttons and set RadioButton value for the viewmodel
*/
var thatone = this;
var viewModel = kendo.observable({
filingCalendar: {
    OtherAnswers: []    
    },
activitiesChanged: function (e){
let that = this;
$.each(this.filingCalendar.OtherAnswers, function(idx, ans) {
            if (parseInt(e.target.name) === ans.FilingQuestionId) {
                that.filingCalendar.OtherAnswers[idx].set("Answer", e.target.value);
                console.log(thatone.viewModel.get("filingCalendar.OtherAnswers"));      
                return true;
            }
        });
}

});

function activitiesChanged(e){
let that = this;
let answers = thatone.viewModel.get("filingCalendar.OtherAnswers");
$.each(answers, function(idx, ans) {
            if (parseInt(e.target.name) === ans.FilingQuestionId) {
                answers[idx].set("Answer", e.target.value);
                console.log(thatone.viewModel.get("filingCalendar.OtherAnswers"));    
                return true;
            }
        });
}

var answers = [];
var custQuestion1 = {
                    FilingQuestionId: 120,
                    Question: "Hello World",
                    Required: false,
                    HelpText: "",
                    MaxLength: null,
                    DataType: "BOOLEAN",
                    Answer: false,
                    Regex: null
                };
               custQuestion1["Answer120"]="false";
               viewModel.set({ "Answer120": "false" });
                
                answers.push(custQuestion1);
                var custQuestion2 = {
                    FilingQuestionId: 121,
                    Question: "Hello World 123",
                    Required: false,
                    HelpText: "",
                    MaxLength: null,
                    DataType: "STRING",
                    Answer: null,
...