New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Server-Side API

  • Demo Configurator
Items Layout
  • LayoutFlow
  • DirectionVertical
  • Spin UpSpin Down
Item Selection

You can quickly configure the layout of the items in RadCheckBoxList. All you need to do is:

  • Set the Layout property to Flow if you just want to display a group of radio buttons. You can configure the orientation of this group by setting the Direction property to Horizontal or Vertical. There is also an option of defining in how many columns the radio buttons will be displayed - you can use the Columns property for this purpose.
  • Set the Layout property to OrderedList or UnorderedList if you want to display the radio buttons in an <ol> or <ul> tag respectively. The Direction and Columns properties are not used in this case.

You can also specify the item in the list that will be selected. This is achieved either by:

  • Setting the SelectedIndex property with the index of the item that should be selected.
  • Setting the SelectedValue property with the value of the item that should be selected.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.CheckBoxList.Configurator.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="CheckBoxList1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

    <div class="demo-container size-wide">
        <telerik:RadCheckBoxList runat="server" ID="CheckBoxList1" AutoPostBack="false">
            <Items>
                <telerik:ButtonListItem Text="Option 1 (Value: 1)" Value="1" />
                <telerik:ButtonListItem Text="Option 2 (Value: 2)" Value="2" />
                <telerik:ButtonListItem Text="Option 3 (Value: 3)" Value="3" />
                <telerik:ButtonListItem Text="Option 4 (Value: 4)" Value="4" />
                <telerik:ButtonListItem Text="Option 5 (Value: 5)" Value="5" />
            </Items>
        </telerik:RadCheckBoxList>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View ID="View1" runat="server">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Items Layout">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="Layout" AutoPostBack="true" Label="Layout" Size="Medium">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="Direction" AutoPostBack="true" Label="Direction" Size="Medium">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
                                runat="server" ID="Columns" Label="Columns" Size="Narrow"
                                Value="0" DataType="Int32" MinValue="0" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Item Selection">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0" OnTextChanged="SelectedIndex_TextChanged"
                                runat="server" ID="SelectedIndex" Label="Selected Index" Size="Medium"
                                DataType="Int32" MinValue="0" MaxValue="4" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:TextBox runat="server" ID="SelectedValue" AutoPostBack="true" Label="Selected Value" OnTextChanged="SelectedValue_TextChanged"
                                Size="Medium"></qsf:TextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance