JSFiddle - React, Tailwind, and code Playground

by rmunir

HTML

<div id="test" data-bind="source:filingCalendar.OtherAnswers" data-template="radio-template"></div>


<script id="radio-template" type="text/x-kendo-template">
<div class="column row">
	<label>#: FilingQuestionId #</label>
</div>
<div>
	<input type="radio" id="1" name="#: FilingQuestionId #", checked:Answer" value="true" data-type="boolean"/>
	<label>Yes</label>
</div>
<div>
	<input type="radio" id="2" name="#: FilingQuestionId #", checked:Answer" value="false" data-type="boolean"/>
	<label>No</label>
</div>
</script>

JavaScript

var viewModel = kendo.observable({
filingCalendar: {
    OtherAnswers: []
    }
});

var answers = [];
var custQuestion = {
                    FilingQuestionId: 120,
                    Question: "Hello World",
                    Required: false,
                    HelpText: "",
                    MaxLength: null,
                    DataType: "BOOLEAN",
                    Answer: false,
                    Regex: null
                };
                
                answers.push(custQuestion);
                custQuestion = {
                    FilingQuestionId: 121,
                    Question: "Hello World 123",
                    Required: false,
                    HelpText: "",
                    MaxLength: null,
                    DataType: "BOOLEAN",
                    Answer: true,
                    Regex: null
                };
                
                answers.push(custQuestion);
viewModel.set("filingCalendar.OtherAnswers", answers);
console.log(viewModel.get("filingCalendar"));
kendo.bind($("#test"), viewModel);