Telerik Forums
Kendo UI for Angular Forum
1 answer
99 views

Hello!  I am having difficulty with the following scenario:  I have an array of objects that I'm displaying in my UI in the form of a table.  On my table I have the following columns: Name (string), PreferenceLevel (number), IsActive (bool).  I am using an *ngFor="let item of items" to render all of the table data.  The name looks great, as does the isActive,. For IsActive I am using a kendo-checkbox like this:

<kendo-checkbox [checkedState]="item.isActive" [(ngModel)]="item.isActive"></kendo-checkbox>

and it seems to render as checked or unchecked well based on the boolean that is coming across.

My Preference Level column is another story.  I have 4 preference levels based on 4 integers: 0,1,2,3.  I would like to have a radio button as the UI for this column, but cannot seem to get them to represent the data that is coming through.  Here's what I have:

<span style="padding-left:5px;">
  <kendo-radiobutton #radio0 value=0  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio0" text="None"></kendo-label>
  <kendo-radiobutton #radio1 value=1  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio1" text="+1"></kendo-label>
  <kendo-radiobutton #radio2 value=2  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio2" text="+2"></kendo-label>
  <kendo-radiobutton #radio3 value=3  [(ngModel)]="item.preferenceLevel"></kendo-radiobutton>
  <kendo-label class="k-radio-label" [for]="radio3" text="+3"></kendo-label>
</span>

Perhaps I need to assign a checkedState or checked attribute in there like I did for the check box, but I can't figure out how to do it for the radio button.  Or perhaps the radio buttons can only process string values? (I saw only string examples in your documentation) There is nothing checked in my table with my markup as is above, though.  Please advise.

Yanmario
Telerik team
 answered on 03 Mar 2025
0 answers
341 views

I'm creating a form where, if some data already exists, it populates the form with that data. There is a field with three radio buttons in the form and I'm having trouble getting one of the buttons to be checked if that field has a value already. As you can see in the provided stackblitz, the form registers that the gender input has a value of female, but the radio button isn't checked.

How can I get it to be checked?

Thank you!

https://stackblitz.com/edit/angular-7fxtac?file=src%2Fapp%2Fapp.component.ts

Caroline
Top achievements
Rank 1
 asked on 23 Oct 2023
1 answer
1.3K+ views

I am creating an application that allows you to create forms dynamically using JSON. I have most of it running but am having a problem with Kendo RadioButtons. I have narrowed my problem down to the template references in your example that I found here: 

https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/

I am looking at the FormField Association example. In my template I have a *ngFor to loop through the values for the options that I am reading from the JSON file. The problem is that I cannot add the template reference dynamically (I have been told that this is a problem with Angular) which means that I cannot use FormField as shown in your example as the template references are hard coded.

Attached is my try (I am quite new to Angular) - I added a templateReference field to my options that is just a string eg. #one that I wanted to add to the input tag...

<ng-container
  [formGroup]="form"
  [ngClass]="field | valuesToCssisGroupControl"
  class="eks-radio-button-control"
>
  <kendo-formfield [orientation]="getOrientation()" showHints="initial">
    <label for="{{field.key}}">{{field.label}}</label>
    <ng-container *ngFor="let option of field.options">
        <input
          {{option.templateReference}}  
          type="radio"
          [value]="option.value"
          [readonly]="field.readOnly"
          [formControlName]="field.key"
          kendoRadioButton
        />
        <label for="{{option.key}}"
          >{{option.value | isNull:'Value missing in JSON file' }}</label
        >
    </ng-container>
    <kendo-formhint>{{field.hint | isNull''}}</kendo-formhint>
    <kendo-formerror>{{field.error}}</kendo-formerror>
  </kendo-formfield>
</ng-container>

 

the above code gives me the error:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName(https://angular.io/api/forms/FormControlName)or an ngModel(https://angular.io/api/forms/NgModel) binding.

which I do understand and can remove if I do not surround everything in a FormField. I would like to keep the FormField though as it gives me the hints and error fields that I really like.

I could, I suppose, create 20 HTML entries and use *ngIf to hide the ones I am not using... this seams a bit heavy handed though! 

I guess my question is therefore how would I go about adding the template reference dynamically for the RadioButton in Kendo?  

Edit: removed some of the test code I left in in the HTML above

Martin Bechev
Telerik team
 answered on 23 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?