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

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

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

Support & Learning Resources

Find Assistance