Declined
Last Updated: 11 Jul 2024 11:22 by ADMIN
Created by: Xiaobo
Comments: 1
Category: RadioGroup
Type: Feature Request
2
Currently, the only available option is to use the Enabled parameter to create a similar behavior to read-only, but from an accessibility point of view, the end-user can't interact with the component and can't go through all available radio options. Add Readonly parameter.
Unplanned
Last Updated: 08 Jan 2024 09:51 by William
Created by: William
Comments: 0
Category: RadioGroup
Type: Feature Request
1
I would like to be able to bind the RadioGroup to a nested property like so:

<TelerikRadioGroup Data="@RadioData"
                   @bind-Value="@ChosenOption"
                   ValueField="Child.Id"
                   TextField="Child.Text">
</TelerikRadioGroup>

@code {
    public int ChosenOption { get; set; }

    public class Parent<TItem>
    {
        public TItem Content { get; set; }

        public Parent(TItem item)
        {
            Content = item;
        }
    }

    public class Child
    {
        public int Id { get; set; }
        public string Text { get; set; }

        public Child(int id, string text)
        {
            Id = id;
            Text = text;
        }
    }

    public List<Parent<Child>> RadioData { get; set; } = new List<Parent<Child>>();

    protected override void OnInitialized()
    {
        RadioData.Add(new Parent<Child>(new Child(0, "Item 1")));
        RadioData.Add(new Parent<Child>(new Child(1, "Some text")));
        RadioData.Add(new Parent<Child>(new Child(2, "Other text")));
        RadioData.Add(new Parent<Child>(new Child(3, "Third text")));
        base.OnInitialized();
    }
}
Unplanned
Last Updated: 20 Nov 2023 11:26 by ADMIN
Created by: Mikanyg
Comments: 3
Category: RadioGroup
Type: Feature Request
19

I would like to be able to disable one or more radio buttons in the RadioGroup.

=====

TELERIK EDIT

In the meantime, consider the following workaround, which relies on CSS and RadioGroup ItemTemplate.

 

<h4>Default Value Disabled</h4>

RadioGroupValue1: @RadioGroupValue1

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue1"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue1;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<h4>No Default Value</h4>

RadioGroupValue2: @RadioGroupValue2

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue2"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue2;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<style>
    .k-radio-list-item:has(.disabled-radio-option) {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
        gap: 0;
    }

    .disabled-radio-option {
        display: flex;
        align-items: center;
        align-content: center;
        gap: var(--kendo-spacing-1);
    }

    .k-radio-list-item:has(.disabled-radio-option) input:not(.fake) {
        display: none;
    }
</style>

@code{
    private int RadioGroupValue1 { get; set; } = 2;
    private int RadioGroupValue2 { get; set; }

    private List<RadioModel> Options { get; set; } = new List<RadioModel>
    {
        new RadioModel { Id = 1, Text = "Option 1" },
        new RadioModel { Id = 2, Text = "Option 2", Enabled = false },
        new RadioModel { Id = 3, Text = "Option 3" },
        new RadioModel { Id = 4, Text = "Option 4", Enabled = false },
        new RadioModel { Id = 5, Text = "Option 5" },
    };

    public class RadioModel
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public bool Enabled { get; set; } = true;
    }
}

 

Completed
Last Updated: 06 Dec 2022 09:38 by ADMIN
Release 4.0.0 (18 Jan 2023) (R1 2023)
Created by: Nasoloniaina
Comments: 5
Category: RadioGroup
Type: Feature Request
12
I would like to add icon to TelerikRadioGroup instead of only text.
Unplanned
Last Updated: 16 Dec 2021 16:02 by ADMIN
Created by: Eli
Comments: 1
Category: RadioGroup
Type: Feature Request
2

I would like to have the option (similar to AJAX controls radiobuttonlist) to specify the number of columns a RadioGroup has.  This would allow it to be evenly formatted no matter the text width and the ordering to go top to bottom and then left to right like below.

Since your control does not allow you to manually define child items, it becomes less useful than the built in InputRadioGroup control provided by Microsoft which allows me to set up the items and styling myself, which is what I use instead.