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