Skip to content

Added new kb article radiogroup-readonly #3104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions knowledge-base/radiogroup-readonly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
title: Readonly RadioGroup
description: Learn how to make the Telerik RadioGroup for Blazor readonly without graying out the text.
type: how-to
page_title: How to Customize Telerik RadioGroup for Blazor to Be Readonly Without Graying Out
meta_title: How to Customize Telerik RadioGroup for Blazor to Be Readonly Without Graying Out
slug: radiogroup-kb-readonly
tags: radiogroup, blazor, readonly
res_type: kb
ticketid: 1690650
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>RadioGroup for Blazor</td>
</tr>
</tbody>
</table>

## Description

I want to make the [RadioGroup](slug:radiogroup-overview) readonly but keep the text visually clear (not grayed out). Using the `Enabled` property disables the input entirely but also makes the text and radio buttons gray, which reduces readability.

## Solution

To make the TelerikRadioGroup readonly without graying out the text, use the following CSS approach:

````Razor
<style>
.k-radio-list li .k-radio-wrap {
pointer-events: none; /* Prevents mouse interactions */
opacity: 0.5; /* Makes it look visually disabled */
cursor: not-allowed;
}

.k-radio-list li label {
pointer-events: none; /* Prevents mouse interactions */
cursor: not-allowed;
}
</style>

Chosen delivery method: @(ChosenDeliveryMethod == 0 ? "no selection yet" : ChosenDeliveryMethod.ToString())
<br />

<TelerikRadioGroup Data="@DeliveryOptions"
@bind-Value="@ChosenDeliveryMethod"
ValueField="@nameof(DeliveryMethodModel.MethodId)"
TextField="@nameof(DeliveryMethodModel.MethodText)">
</TelerikRadioGroup>

@code {
private int ChosenDeliveryMethod { get; set; }

private List<DeliveryMethodModel> DeliveryOptions { get; set; } = new List<DeliveryMethodModel>
{
new DeliveryMethodModel { MethodId = 1, MethodText = "Standard Shipping" },
new DeliveryMethodModel { MethodId = 2, MethodText = "Express Shipping" },
new DeliveryMethodModel { MethodId = 3, MethodText = "In-Store Pickup" },
new DeliveryMethodModel { MethodId = 4, MethodText = "Curbside Pickup" },
};

public class DeliveryMethodModel
{
public int MethodId { get; set; }
public string MethodText { get; set; }
}
}
````

## See Also

* [RadioGroup Documentation](slug:radiogroup-overview)
* [CSS pointer-events Property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)
* [RadioGroup Binding](slug:radiogroup-databind)
Loading