DxRadioGroup<TData, TValue> Class

A component that generates a radio button group based on a bound collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRadioGroup<TData, TValue> :
    DxDataEditor<TValue>

Type Parameters

Name	Description
TData	The data item type.
TValue	The value type.

Remarks

The DevExpress Radio Group for Blazor (<DxRadioGroup>) allows you to create a group of radio buttons. A user can select only one button in the group at a time.

Run Demo: RadioGroup - Overview

Note

As an alternative, you can use the DevExpress Radio Button component (<DxRadio>). The Radio Button component allows you to create and customize radio buttons individually, while the Radio Group component allows you to generate a set of radio buttons based on a collection.

Add a Radio Group to a Project

Follow the steps below to add the Radio Group component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add the <DxRadioRadio>…</DxRadioGroup> markup to a .razor file.
3. Configure the component: bind it to a data collection and customize layout and appearance options as described below.

Bind to Data

The Radio Group component generates and arranges radio items based on a collection (the Items property).

<DxRadioGroup Items="@Languages"
              @bind-Value="@PreferredLanguage"/>
<p>Preferred language:
    <strong>@PreferredLanguage</strong>
</p>


@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };
}

Run Demo: RadioGroup - Overview View Example: Change visibility of the DxFormLayout's items and groups conditionally

Layout

Use the Layout property to specify whether the Radio Group component arranges items vertically or horizontally.

<DxRadioGroup Items="@Languages"
              @bind-Value="@PreferredLanguage"
              Layout="@RadioGroupLayout.Horizontal">
</DxRadioGroup>

@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };
}

Run Demo: RadioGroup - Layout

Content Position

Use the following properties to change content position:

• ItemAlignment - Specifies the position of item labels relative to the container boundaries.
• ItemLabelPosition - Specifies the position of item labels relative to clickable circles.

<div style="width:400px">
    <DxRadioGroup Items="@Languages"
                  @bind-Value="@PreferredLanguage"
                  ItemLabelPosition="LabelPosition.Left"
                  ItemAlignment="CheckBoxContentAlignment.Right">
    </DxRadioGroup>
</div>

@code {
    string PreferredLanguage { get; set; } = "English";
    IEnumerable<string> Languages = new[] { "English", "简体中文", "Español", "Français", "Deutsch" };
}

Item Template

The Radio Group component contains the ItemTemplate property that allows you to customize item labels.

Razor

<legend>Select your drink:</legend>
<DxRadioGroup Items="@Drinks"
              @bind-Value="@SelectedDrinkId"
              ValueFieldName="@nameof(Product.ProductId)"
              EnabledFieldName="@nameof(Product.InStock)">
    <ItemTemplate>@context.ProductName @GetDrinkState(context)</ItemTemplate>
</DxRadioGroup>
<p>
    You have selected:
    <strong>@GetDrinkName()</strong>
</p>

@code {
    int SelectedDrinkId { get; set; } = 2;
    IEnumerable<Product> Products { get; set; }
    IEnumerable<Product> drinks;

    IEnumerable<Product> Drinks {
        get => drinks;
        set {
            drinks = value;
            InvokeAsync(StateHasChanged);
        }
    }

    protected override async Task OnInitializedAsync() {
        Products = await NwindDataService.GetProductsAsync();
        Drinks = Products.Where(p => p.CategoryId == 1).Take(5).AsEnumerable();
    }

    string GetDrinkState(Product product) => product.InStock ? $"({product.UnitsInStock} units left)" : "(out of stock)";

    string GetDrinkName() => Drinks.First(p => p.ProductId == SelectedDrinkId).ProductName;
}

Product.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

public partial class Product {
    public Product() {
        OrderDetails = new HashSet<OrderDetail>();
    }
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public int? SupplierId { get; set; }
    public int? CategoryId { get; set; }
    public string QuantityPerUnit { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public bool InStock => !Discontinued;
    public virtual Category Category { get; set; }
    public virtual Supplier Supplier { get; set; }
    public virtual ICollection<OrderDetail> OrderDetails { get; set; }
}

Run Demo: RadioGroup - Item Template

Disable Radio Buttons

The Radio Group component supports disabled mode. The EnabledFieldName property specifies the data source field that contains an enabled flag for component items. A user cannot focus or select disabled items.

Input Validation

You can add a standalone Radio Group component or Form Layout component to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

Razor

 <EditForm Model="@starship"
           OnValidSubmit="@HandleValidSubmit"
           OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator /> 
    <label>
        Engine Type:
    </label>
    <DxRadioGroup @bind-Value="@starship.Engine"
                  Items="@(Enum.GetValues(typeof(Engine)).Cast<Engine>())"
                  Layout="@RadioGroupLayout.Horizontal"/>
    <ValidationMessage For="@(() => starship.Engine)" />
</EditForm>

@code {
    // ...
    Starship starship = new() {
        ProductionDate = DateTime.Now + TimeSpan.FromDays(1),
        Description = "Default description"
    };
}

Starship.cs

public class Starship {
    [Required(ErrorMessage = "You need an engine to fly."), EnumDataType(typeof(Engine))]
    public Engine? Engine { get; set; }
    // ...
}

Engine.cs

public enum Engine {
    Ion,
    Plasma,
    Fusion,
    Warp
}

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation - Custom Form

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponentBase

DxDataEditor<TValue>

DxRadioGroup<TData, TValue>