RadioButtonList

in namespace DotVVM.BusinessPack.Controls

Renders a RadioButtonList control displaying a list of radio buttons.

Usage & Scenarios

Renders a list of RadioButton controls and lets the user to select a single value. The selected value can be set or retrieved using the SelectedValue property of the control.

Sample 1: Basic Usage

The DataSource property specifies a collection of strings. For each item in the collection, a radio button is created.

The SelectedValue property is bound to a property which contains the item from the DataSource collection which was selected in the control. The data-binding works in both ways, so you can either read, or modify the property in the viewmodel and the changes will get synchronized with the control.

page.dothtml
ViewModel.cs

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountry}" />

<p>Selected country: {{value: SelectedCountry}}</p>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<string> Countries { get; set; } = new List<string> {
            "Czech Republic", "Slovakia", "United States"
        };

        public string SelectedCountry { get; set; }
    }
}

Sample 2: Working with Objects

When the DataSource collection is bound to a collection of objects, you may use the ItemTextBinding to specify which property of the object in the collection will be displayed as a text of a particular radio button.

The SelectedValue will still contain the object from the DataSource collection which is selected.

In order to allow the control to uniquely identify these objects, you need to use the ItemKeyBinding property to define a property which can work as a key. The key must be unique for all items in the collection, otherwise the control will not work properly.

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountry}"
                    ItemKeyBinding="{value: Id}"
                    ItemTextBinding="{value: Name}" />

<p>Selected country: {{value: SelectedCountry.Name}}</p>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic" },
            new Country { Id = 2, Name = "Slovakia" },
            new Country { Id = 3, Name = "United States" }
        };

        public Country SelectedCountry { get; set; }
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample2
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsChecked { get; set; }
    }
}

Sample 3: Working with Objects 2

To make the SelectedValue property contain only a value of a specific property from the DataSource object (like the Id property of the selected object), you may use the ItemValueBinding property.

The SelectedValue property will then contain only the value of the property specified in the ItemValueBinding. Provided the values of the properties used as a value are unique, you don't need to specify the ItemKeyBinding property.

The ItemKeyBinding property is required only when the control cannot compare the objects in the DataSource collection with the object in the SelectedValue property. If the ItemValueBinding is set and makes the SelectedValue property use a primitive type that can be compared, the ItemKeyBinding property is not needed. Similarly, if the DataSource collection contains only primitive values (string, int etc.), the ItemKeyBinding property is not necessary.

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountryName}"
                    ItemKeyBinding="{value: Id}"
                    ItemValueBinding="{value: Name}"
                    ItemTextBinding="{value: Name}" />

<p>Selected country: {{value: SelectedCountryName}}</p>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic" },
            new Country { Id = 2, Name = "Slovakia" },
            new Country { Id = 3, Name = "United States" }
        };

        public string SelectedCountryName { get; set; }
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample3
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsChecked { get; set; }
    }
}

Sample 4: Changed Event

The Changed event specifies the command in the viewmodel that is triggered whenever the user changes the value in the control.

page.dothtml
ViewModel.cs

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountry}"
                    Changed="{command: SelectionChanged()}" />

<p>You've changed country {{value: CountryChangeCount}} times.</p>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int CountryChangeCount { get; set; }

        public List<string> Countries { get; set; } = new List<string> {
            "Czech Republic", "Slovakia", "United States"
        };

        public string SelectedCountry { get; set; }

        public void SelectionChanged()
        {
            CountryChangeCount++;
        }
    }
}

Sample 5: Radio Button Groups

The GroupName property is used to distinguish between groups of radio buttons that belong together. If you need two independent RadioButtonList controls, you need to give each one a different GroupName.

page.dothtml
ViewModel.cs

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountry}"
                    GroupName="CountriesGroup" />

<bp:RadioButtonList DataSource="{value: FavoriteColors}"
                    SelectedValue="{value: SelectedColor}"
                    GroupName="ColorsGroup" />

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<string> Countries { get; set; } = new List<string> {
            "Czech Republic", "Slovakia", "United States"
        };

        public string SelectedCountry { get; set; }


        public List<string> FavoriteColors { get; set; } = new List<string> {
            "red", "green", "blue", "yellow", "white", "black"
        };

        public string SelectedColor { get; set; }
    }
}

Sample 6: Disabling Radio Buttons

If you need to disable some of the radio buttons, you can use the ItemEnabledBinding to define which radio buttons will be enabled and which will not. By default, all radio buttons are enabled.

The Enabled property on the control takes the precedence before the ItemEnabledBinding.

<bp:RadioButtonList DataSource="{value: Countries}"
                    SelectedValue="{value: SelectedCountry}"
                    ItemKeyBinding="{value: Id}"
                    ItemTextBinding="{value: Name}"
                    ItemEnabledBinding="{value: IsEnabled}"
                    Enabled="{value: IsControlEnabled}" />

<br />
<bp:CheckBox Checked="{value: IsControlEnabled}"
             Text="Enable control" />

<br />
<bp:CheckBox Checked="{value: Countries[2].IsEnabled}"
             Text="Enable United States" />

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample6
{
    public class ViewModel : DotvvmViewModelBase
    {
        public bool IsControlEnabled { get; set; }
        public bool IsItemEnabled { get; set; }

        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic" },
            new Country { Id = 2, Name = "Slovakia" },
            new Country { Id = 3, Name = "United States", IsEnabled = false }
        };

        public Country SelectedCountry { get; set; }
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample6
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsChecked { get; set; }
    }
}

Sample 7: Templates

To display custom content in the control, you can use the ItemTemplate property to declare a custom template for the data source items.

You can also use the EmptyDataTemplate when you want to display contents when the DataSource is empty.

<bp:RadioButtonList DataSource="{value: Countries}"
                 SelectedValue="{value: SelectedCountry}"
                 ItemTextBinding="{value: Name}"
                 ItemKeyBinding="{value: Id}">
    <EmptyDataTemplate>
        You must fill the DataSource before you can select country.
    </EmptyDataTemplate>
    <ItemTemplate>
        <span>{{value: Id}}. {{value: Name}}</span>
    </ItemTemplate>
</bp:RadioButtonList>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample7
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", IsChecked = true },
            new Country { Id = 2, Name = "Slovakia" },
            new Country { Id = 3, Name = "United States" }
        };

        public Country SelectedCountry { get; set; }
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.RadioButtonList.sample7
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsChecked { get; set; }
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.	attribute inner element static value bindable default	null
DataSource	IEnumerable		attribute inner element static value bindable default	null
EmptyDataTemplate	ITemplate	Gets or sets the template which will be displayed when the DataSource is empty.	attribute inner element static value bindable default	null
Enabled	Boolean	Gets or sets a value indicating whether the control is enabled and can be modified.	attribute inner element static value bindable default	False
GroupName	String	Gets or sets a unique name identifying this group of radio buttons. A random name is generated by default.	attribute inner element static value bindable default	null
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
ItemEnabledBinding	IValueBinding<Boolean?>	Gets or sets the binding indicating whether a DataSource item can be checked.	attribute inner element static value bindable default	null
ItemKeyBinding	IValueBinding	Gets or sets the binding which retrieves the unique key of a DataSource item.	attribute inner element static value bindable default	null
ItemTemplate	ITemplate	Gets or sets the template used to render each item in the DataSource.	attribute inner element static value bindable default	null
ItemTextBinding	IValueBinding<String>	Gets or sets the binding which retrieves text from a DataSource item. It retrieves the whole item by default.	attribute inner element static value bindable default	null
ItemValueBinding	IValueBinding	Gets or sets the binding which retrieves a value from a checked DataSource item. It retrieves the whole item by default.	attribute inner element static value bindable default	null
SelectedValue	Object	Gets or sets the value of the first item checked by user.	attribute inner element static value bindable default	null
Visible	Boolean	Gets or sets whether the control is visible.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Changed	ICommandBinding	Gets or sets the command that will be triggered when an item is checked / unchecked.

Edit on Github