This is a migrated thread and some comments may be shown as answers.

Radiobutton group in template

4 Answers 510 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Iron
Scott asked on 30 Oct 2020, 06:46 PM

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

4 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 03 Nov 2020, 02:12 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Scott
Top achievements
Rank 1
Iron
answered on 03 Nov 2020, 02:18 PM
Perfect.  Thanks a bunch Veselin.  
0
Scott
Top achievements
Rank 1
Iron
answered on 10 Nov 2020, 06:48 PM

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?

0
Accepted
Veselin Tsvetanov
Telerik team
answered on 12 Nov 2020, 02:03 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Templates
Asked by
Scott
Top achievements
Rank 1
Iron
Answers by
Veselin Tsvetanov
Telerik team
Scott
Top achievements
Rank 1
Iron
Share this question
or