Radiobutton group in template

[Scott]

I am looking to create a collection of quizzes for our HR training.  From the database side i would like to send in a list of questions and answers in a JSON object.  From that JSON, I want to dynamically create the dom for the web quiz using templates in kendo for jquery.  I found some articles and read up a bit about templates in telerik and thought that the template works for what I need.  I found an example on the forums and have modified it try to add the radiobutton group for multiple choice question or true\false and Yes\No questions.  So in my example, I can't get the radio buttons to show in the nested template.  What am I missing with regards to the radio template only showing as an object but not rendering the actual radio buttons.  

 

https://dojo.telerik.com/iwuQaJUz

[Veselin Tsvetanov]

Hello Scott,

I would suggest you use nested ListView, which has its own template to render the radio buttons options. Also, I would strongly recommend you to avoid mixing MVVM binding (kendo.bind()) and the explicit widget initialization ($(id).kendoListView()) on the same DOM elements. Moreover, keep in mind that all the data needed for a section of a page should be present in the same ViewModel. That is why you should move the radio buttons data directly in the type: radio item:

},{
  "name": "radYesNoNA",
  "label": "Is this True?",
  "type": "radio",
  checkModel:{
    selectedValue:"1",
    id:"radiogroup",
    items:[
      {caption:"yes", value:"0"},
      {caption:"no", value:"1"},
      {caption:"na", value:"2"}
    ]
  }
},{

Here is a modified version of the Dojo sample implementing the above suggestions:

https://dojo.telerik.com/iwuQaJUz/28

Regards,
Veselin Tsvetanov
Progress Telerik

[Scott]

Perfect.  Thanks a bunch Veselin.  

[Scott]

Ok, so I worked on my JSON coming in and it essentially will need to be 3 levels of a nested datasource.  Quiz, Questions, and possible answers for each question (items).

So on this example with 1 question in the quiz it shows in the template normally.  

https://dojo.telerik.com/utOzaval

 

In this example I add one more question to the question data and it no longer works.  

https://dojo.telerik.com/eDeKEcIS

 

Is the issue with my JSON structure or with the way the template is setup?

[Veselin Tsvetanov]

Hello Scott,

In the Dojo sample sent there were several syntax errors present in the DataSource Schema configuration. I have completely removed that as it is not needed for the scenario in question.

Apart from that the source follwoing configuration of the ListView is incorrect:

data-bind="source: selectedQuiz.questions.checkModel.items"

The reason is the fact that the selectedQuiz.questions is an array and not an object. Hence, checkedModel is a member of one of its items. That is why in order to display the RadioButtons I have changed the above source binding to:

data-bind="source: selectedQuiz.questions[0].checkModel.items"

Here you could find a modified version of the Dojo sent implementing the above changes:

https://dojo.telerik.com/eDeKEcIS/12

Note that in order to list all questions with all their radios, you will need to further extend the above approach involving the nesting mechanism demonstrated in my previous reply.

Regards,
Veselin Tsvetanov
Progress Telerik