Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
You can quickly configure the layout of the items in RadCheckBoxList. All you need to do is:
You can also specify the item in the list that will be selected. This is achieved either by:
<%@ 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>