ASP.NET Core RadioGroup Overview

Telerik UI for ASP.NET Core Ninja image

The RadioGroup is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI RadioGroup TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI RadioGroup widget.

The RadioGroup allows to check and uncheck radio buttons, set the position of the labels, attributes and custom CSS classes.

Initializing the RadioGroup

The following example demonstrates how to define the RadioGroup.

    @(Html.Kendo().RadioGroup()
        .Name("radiogroup")
    )
     <kendo-radiogroup name="radiogroup"
                       radio-name="radiogroup">
    </kendo-radiogroup>

Basic Configuration

The following example demonstrates the basic configuration for the RadioGroup.

    @(Html.Kendo().RadioGroup()
        .Name("radiogroup")
        .Items(i =>
        {
            i.Add().Label("Spain").Value("1");
            i.Add().Label("Italy").Value("2");
            i.Add().Label("UK").Value("3");
        })
        .Value("1")
    )
    <script>
    $(function() {
        // The Name() of the RadioGroup is used to get its client-side instance.
        var radiogroup = $("#radiogroup").data("kendoRadioGroup");
    });
    </script>
    <kendo-radiogroup name="radiogroup"
                      radio-name="radiogroup"
                      value="1">
        <kendo-radiogroup-items>
            <kendo-radiogroup-item label="Spain" value="1"></kendo-radiogroup-item>
            <kendo-radiogroup-item label="Italy" value="2"></kendo-radiogroup-item>
            <kendo-radiogroup-item label="UK" value="3"></kendo-radiogroup-item>
        </kendo-radiogroup-items>
    </kendo-radiogroup>

Functionality and Features

  • Binding—The component supports binding to a collection of data.
  • Label—Each RadioGroup item may have a label associated with it.
  • Layout—The RadioGroup supports two types of layout: horizontal and vertical.

Next Steps

See Also

In this article