Unplanned
Last Updated: 16 Jul 2021 19:42 by Dale
Mikael
Created on: 01 Jun 2021 11:10
Category: RadioGroup
Type: Feature Request
9
Support for disabled items

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>

1 comment
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.