Unplanned
Last Updated: 20 Nov 2023 11:26 by ADMIN
Mikanyg
Created on: 01 Jun 2021 11:10
Category: RadioGroup
Type: Feature Request
19
Support for disabled items

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;
    }
}

 

3 comments
ADMIN
Hristian Stefanov
Posted on: 20 Nov 2023 11:26

Hello,

Thank you for showing your interest in the feature.

You can subscribe to the item to receive email notifications for status updates.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Joe
Posted on: 14 Nov 2023 12:40
Highly desirable!
Dale
Posted on: 16 Jul 2021 19:42
This would would be very useful and inline with other telerik blazor controls that support like how the telerik blazor contextmenu handles this.