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.

radio.gif

 <%@ 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 runat="server">

 Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
lblProduct.Text = rblProducts.SelectedItem.Text
End Sub

</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:

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!