Questions on Kendo UI for Angular Forum

1 answer

105 views

How do I set the checked state of a radio button for a number value?

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:

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.

RadioButton

answered on 03 Mar 2025

0 answers

344 views

How to set the initial value of a radio button

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

RadioButton

asked on 23 Oct 2023

1 answer

1.3K+ views

:RadioButton in FormField when using Reactive Forms

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 | valuesToCss: isGroupControl"
  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

RadioButton

answered on 23 Aug 2021