Unplanned
Last Updated: 27 Jul 2022 10:52 by ADMIN
Created by: Nasoloniaina
Comments: 4
Category: RadioGroup
Type: Feature Request
9
I would like to add icon to TelerikRadioGroup instead of only text.
Duplicated
Last Updated: 22 Mar 2022 09:07 by ADMIN
Created by: Matt
Comments: 1
Category: RadioGroup
Type: Bug Report
0
ISSUE - ul (role="radiogroup") needs a group label
what to do:
  • create a span before first LI as label
  • UL shall reference span via aria-labelledby
  • group label needs to look like a group label (it must be more significant/important than the radio labels)

As these elements are wrapped by the control this needs to be updated internally.

Completed
Last Updated: 02 Mar 2022 15:34 by ADMIN
Release 3.2.0
Created by: Alex
Comments: 0
Category: RadioGroup
Type: Bug Report
1

There is an attribute called AriaLabelledBy available on the control but it does not work. It would be good for the AriaLabelledBy attribute to do what it is supposed to do and make it work like the following code:

<h3 id="grouplabel1">Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)" AriaLabelledBy="grouplabel1">
</TelerikRadioGroup>

@code {
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female" },
        new GenderModel { GenderId = 2, GenderText = "Male" },
        new GenderModel { GenderId = 3, GenderText = "Other" },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
    }
}

----------ADMIN EDIT----------

A possible workaround is to wrap the RadioGroup inside a normal div and use the normal HTML aria-labelledby attribute:

<div role="radiogroup" aria-labelledby="group_label_1">
    <h3 id="group_label_1" >Chosen gender: @( ChosenGender == 0 ? "no selection yet" : ChosenGender.ToString() )</h3>
<br />

<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)">
</TelerikRadioGroup>
</div>

@code{
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female" },
        new GenderModel { GenderId = 2, GenderText = "Male" },
        new GenderModel { GenderId = 3, GenderText = "Other" },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say" },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
    }
}

Unplanned
Last Updated: 16 Dec 2021 16:02 by ADMIN
Created by: Eli
Comments: 1
Category: RadioGroup
Type: Feature Request
1

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. 

 

Unplanned
Last Updated: 08 Dec 2021 14:04 by ADMIN
Created by: chris
Comments: 0
Category: RadioGroup
Type: Bug Report
0

A RadioGroup inside a Grid EditorTemplate will fire OnBlur when the user clicks on it. This will close the edit cell and (usually) not apply the new value.

Here is a test page: https://blazorrepl.telerik.com/wvbmkMvd48rpMN4547

Completed
Last Updated: 15 Sep 2021 13:34 by ADMIN
Release 2.27.0
Created by: Xiaobo
Comments: 0
Category: RadioGroup
Type: Bug Report
0

When I test the accessibility of the TelerikRadioGroup I have found out issues.

 

Unplanned
Last Updated: 16 Jul 2021 19:42 by Dale
Created by: Mikael
Comments: 1
Category: RadioGroup
Type: Feature Request
6

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

 

<AdminEdit>

The CSS workaround below uses the nth-child selector. In the example, I have disabled the third and fourth options and you can use it as a base and extend that sample in your own application.

<style>
    .disabled-items li:nth-child(3),
    .disabled-items li:nth-child(4) {
        outline: none;
        cursor: default;
        opacity: 0.6;
        -webkit-filter: grayscale(0.1);
        filter: grayscale(0.1);
        pointer-events: none;
        box-shadow: none;
    }
</style>

<TelerikRadioGroup Data="@GenderOptions"
                   @bind-Value="@ChosenGender"
                   ValueField="@nameof(GenderModel.GenderId)"
                   TextField="@nameof(GenderModel.GenderText)"
                   Class="disabled-items">
</TelerikRadioGroup>

@code{
    TelerikRadioGroup<GenderModel, int?> RadioGroupRef { get; set; }

    int ChosenGender { get; set; }

    List<GenderModel> GenderOptions { get; set; } = new List<GenderModel>
    {
        new GenderModel { GenderId = 1, GenderText = "Female", isEnabled = true },
        new GenderModel { GenderId = 2, GenderText = "Male", isEnabled = false },
        new GenderModel { GenderId = 3, GenderText = "Other", isEnabled = true },
        new GenderModel { GenderId = 4, GenderText = "Prefer not to say", isEnabled = true },
    };

    public class GenderModel
    {
        public int GenderId { get; set; }
        public string GenderText { get; set; }
        public bool isEnabled { get; set; }
    }
}

</AdminEdit>