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
  • Transfer Right
  • Transfer Left

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