RadioButton List Control in ASP.NET

Introduction & Demonstration

The RadioButtonList control works like the DropDownList control but it enables a user to select only one list item at a time. The RadioButttonList control displays a list of radio buttons that can be arranged either horizontally or vertically.

The page given below illustrates how we use the RadioButtonList control to display a list of products titles.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">

<div>

<asp:RadioButtonList
id="rblProducts"
DataSourceID="SqlDataSource1"
DataTextField="TITLE"
DataValueField="ID"
RepeatColumns="4"
Runat="server" />

<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />

<hr />

<asp:Label
id="lblProduct"
Runat="server" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>

</div>
</form>
</body>
</html>

In above example, the radio buttons are rendered in a three-column layout. The RadioButtonList control includes three properties that have an effect on its layout:

RepeatColumns The number of columns of radio buttons to display.
RepeatDirection The direction that the radio buttons are repeated. Possible values are Horizontal and Vertical.
RepeatLayout Determines whether the radio buttons are displayed in an HTML table. Possible values are Table and Flow.

By default, the radio buttons rendered by the RadioButtonList control are rendered in an HTML table. If we set the RepeatLayout property to the value Flow, then the radio buttons are not rendered in a table. Even when the RadioButtonList renders its items in Flow layout mode, we can specify multiple columns.

HAVE A GREAT CODING!