ListBox - Button Configuration

  • Argentina
  • Australia
  • Brazil
  • Canada
  • Chile
  • China
  • Egypt
  • England
  • France
  • Germany
  • India
  • Indonesia
  • Kenya
  • Mexico
  • New Zealand
  • South Africa
  • USA

Demo Configurator

  • Button positionRight
  • Vertical AlignmentTop
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can control the way buttons are rendered using the ButtonSettings property.

You can display text next to the image by setting the RenderButtonText property to true. Do not forget to adjust the AreaWidth (or AreaHeight) property in order to accomodate the text:

<RadListBox runat="server" ID="RadListBox1" AllowReorder="true" >
	<ButtonSettings AreaWidth="100px" RenderButtonText="True" />
</RadListBox/>

You can change the position of the buttons by using the Position property of the ButtonSettings:

<RadListBox runat="server" ID="RadListBox1" AllowReorder="true" >
	<ButtonSettings Position="Bottom" />
</RadListBox/>

You can also specify the alignment of the buttons by using the HorizontalAlign and VerticalAlign properties depending on the Position property:

<RadListBox runat="server" ID="RadListBox1" AllowReorder="true" >
	<ButtonSettings Position="Bottom" HorizontalAlign="Center" />
</RadListBox/>
<RadListBox runat="server" ID="RadListBox1" AllowReorder="true" >
	<ButtonSettings Position="Right" VerticalAlign="Middle" />
</RadListBox/>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.Buttons.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />

    <div class="demo-container size-thin">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" AllowReorder="true" AllowDelete="true"
            Height="200px" Width="300px" >
            <Items>
                <telerik:RadListBoxItem Text="Argentina" />
                <telerik:RadListBoxItem Text="Australia" />
                <telerik:RadListBoxItem Text="Brazil" Selected="true" />
                <telerik:RadListBoxItem Text="Canada" />
                <telerik:RadListBoxItem Text="Chile" />
                <telerik:RadListBoxItem Text="China" />
                <telerik:RadListBoxItem Text="Egypt" />
                <telerik:RadListBoxItem Text="England" />
                <telerik:RadListBoxItem Text="France" />
                <telerik:RadListBoxItem Text="Germany" />
                <telerik:RadListBoxItem Text="India" />
                <telerik:RadListBoxItem Text="Indonesia" />
                <telerik:RadListBoxItem Text="Kenya" />
                <telerik:RadListBoxItem Text="Mexico" />
                <telerik:RadListBoxItem Text="New Zealand" />
                <telerik:RadListBoxItem Text="South Africa" />
                <telerik:RadListBoxItem Text="USA" />
            </Items>
        </telerik:RadListBox>
    </div>



    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadListBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ButtonPositionComboBox" AutoPostBack="true" Label="Button position">
                                <Items>
                                    <telerik:DropDownListItem Text="Top" Value="Top" />
                                    <telerik:DropDownListItem Text="Right" Value="Right" Selected="true" />
                                    <telerik:DropDownListItem Text="Bottom" Value="Bottom" />
                                    <telerik:DropDownListItem Text="Left" Value="Left" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <asp:PlaceHolder runat="server" ID="VerticalAlignment">
                            <li>
                                <qsf:DropDownList runat="server" ID="VerticalAlignmentComboBox" AutoPostBack="true" Label="Vertical Alignment">
                                    <Items>
                                        <telerik:DropDownListItem Text="Top" Value="Top" Selected="true" />
                                        <telerik:DropDownListItem Text="Middle" Value="Middle" />
                                        <telerik:DropDownListItem Text="Bottom" Value="Bottom" />
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </asp:PlaceHolder>
                        <asp:PlaceHolder runat="server" ID="HorizontalAlignment" Visible="false">
                            <li>
                                <qsf:DropDownList runat="server" ID="HorizontalAlignmentComboBox" AutoPostBack="true" Label="Horizontal Alignment">
                                    <Items>
                                        <telerik:DropDownListItem Text="Left" Value="Left" Selected="true" />
                                        <telerik:DropDownListItem Text="Center" Value="Center" />
                                        <telerik:DropDownListItem Text="Right" Value="Right" />
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </asp:PlaceHolder>
                        <li>
                            <asp:CheckBox runat="server" ID="RenderTextCheckBox" AutoPostBack="true" Text="Render button text" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Find Assistance

Help Us Improve

Was this example helpful?