Overview
This help article showcases how to configure the layout of the RadRadioButtonList control via the Layout
, Columns
and Direction
properties.
Layout
You can control whether the radio buttons will be rendered inside ul or li elements or without any elements. This behavior is controlled via the Layout
property that takes Flow
(default value), OrderedList
and UnorderedList
values.
You can see the output of Example 1 that shows different layouts of the control in Figure 1.
Layout="Flow"
<telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" Layout="Flow">
</telerik:RadRadioButtonList>
"OrderedList"
<telerik:RadRadioButtonList ID="RadRadioButtonList2" runat="server" Layout="OrderedList">
</telerik:RadRadioButtonList>
"UnorderedList"
<telerik:RadRadioButtonList ID="RadRadioButtonList3" runat="server" Layout="UnorderedList">
</telerik:RadRadioButtonList>
protected void Page_Init(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++)
{
ButtonListItem rbli = new ButtonListItem() { Text = "Item " + i, Value = i.ToString() };
if (i == 0) { rbli.Selected = true; }
RadRadioButtonList1.Items.Add(rbli);
RadRadioButtonList2.Items.Add(rbli);
RadRadioButtonList3.Items.Add(rbli);
}
}
Protected Sub Page_Init(sender As Object, e As EventArgs)
For i As Integer = 0 To 9
Dim rbli As New ButtonListItem() With { _
Key .Text = "Item " & i, _
Key .Value = i.ToString() _
}
If i = 0 Then
rbli.Selected = True
End If
RadRadioButtonList1.Items.Add(rbli)
RadRadioButtonList2.Items.Add(rbli)
RadRadioButtonList3.Items.Add(rbli)
Next
End Sub
Columns
Radio buttons inside the RadRadioButtonList are rendered inside a single column by default. You can change this behavior using the Columns
property. You can see a sample in Example 2 and the output in Figure 2.
<telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" Layout="Flow" Columns="2">
</telerik:RadRadioButtonList>
protected void Page_Init(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++)
{
ButtonListItem rbli = new ButtonListItem() { Text = "Item " + i, Value = i.ToString() };
if (i == 0) { rbli.Selected = true; }
RadRadioButtonList1.Items.Add(rbli);
}
}
Protected Sub Page_Init(sender As Object, e As EventArgs)
For i As Integer = 0 To 9
Dim rbli As New ButtonListItem() With { _
Key .Text = "Item " & i, _
Key .Value = i.ToString() _
}
If i = 0 Then
rbli.Selected = True
End If
RadRadioButtonList1.Items.Add(rbli)
Next
End Sub
Direction
You can control the direction in which radio buttons are displayed within the groups via the Direction
property (the output of Example 3 is shown in Figure 3).
Direction="Horizontal"
<telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" Layout="Flow" Columns="2" Direction="Horizontal">
</telerik:RadRadioButtonList>
Direction="Vertical"
<telerik:RadRadioButtonList ID="RadRadioButtonList2" runat="server" Layout="Flow" Columns="2" Direction="Vertical">
</telerik:RadRadioButtonList>
protected void Page_Init(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++)
{
ButtonListItem rbli = new ButtonListItem() { Text = "Item " + i, Value = i.ToString() };
if (i == 0) { rbli.Selected = true; }
RadRadioButtonList1.Items.Add(rbli);
RadRadioButtonList2.Items.Add(rbli);
}
}
Protected Sub Page_Init(sender As Object, e As EventArgs)
For i As Integer = 0 To 9
Dim rbli As New ButtonListItem() With { _
Key .Text = "Item " & i, _
Key .Value = i.ToString() _
}
If i = 0 Then
rbli.Selected = True
End If
RadRadioButtonList1.Items.Add(rbli)
RadRadioButtonList2.Items.Add(rbli)
Next
End Sub