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

    WebForms SplitButton Overview

    • Argentina
    • Australia
    • Brazil
    • Canada
    • Chile
    • China
    • Egypt
    • England
    Transfer Item

    About RadSplitButton for ASP.NET AJAX

    The RadSplitButton control is a multi-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives. It extends the already known RadPushButton with a RadContextMenu holding the set of alternative button options.

    RadSplitButton and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

    Key Features

    • Rich client-side functionality
    • Built-in Accessibility, WAI-ARIA and RTL support.
    • Single click functionality—Avoid multiple postbacks/callbacks to the server
    • Content Template—allows using complex content inside the SplitButton to achieve a custom look and feel of the control.
    • Icons—you can make the button even more intuitive by placing an Icon next to each context menu option
    • Advanced Skinning—the visual appearance of the SplitButton control can be easily customized through skins
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.SplitButton.Overview.DefaultCS" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <script src="scripts.js" type="text/javascript"></script>
    </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-narrow">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <div>
                    <telerik:RadListBox RenderMode="Lightweight" ID="RadListBoxSource" runat="server" Height="200px" TransferToID="RadListBoxDestination" OnClientLoad="storeListBoxSourceReference">
                        <Items>
                            <telerik:RadListBoxItem Text="Argentina" Selected="true"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Australia"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Brazil"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Canada"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Chile"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="China"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Egypt"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="England"></telerik:RadListBoxItem>
                        </Items>
                    </telerik:RadListBox>
                    <telerik:RadListBox RenderMode="Lightweight" ID="RadListBoxDestination" runat="server" Height="200px">
                    </telerik:RadListBox>
     
                    <telerik:RadSplitButton ID="RadSplitButton1" runat="server" AutoPostBack="false" Text="Transfer Item"
                        OnClientClicked="OnClientClicked" OnClientLoad="storeSplitButtonReference">
                        <ContextMenu runat="server" OnClientItemClicked="OnClientItemClicked" OnClientLoad="storeContextMenuReference">
                            <Items>
                                <telerik:RadMenuItem Text="Transfer Right" Value="TransferRight">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Transfer Left" Value="TransferLeft">
                                </telerik:RadMenuItem>
                            </Items>
                        </ContextMenu>
                    </telerik:RadSplitButton>
                </div>
            </telerik:RadAjaxPanel>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance