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

Split Button

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

The split button functionality enables the developer to display a second button right next to the original button, whose main function is to enhance the usability of the first (Primary Button). For example, the user can select an action (command), from a predefined list of actions (commands), and then execute that action (command) every time the button is clicked.

To enable the SplitButton functionality set the EnableSplitButton property to true.

You can use a split button to consolidate a set of variations of a command, especially when one of the commands is used most of the time.
The SplitButton control in this demo supports the following behaviors:

  • When clicked for the first time, the SplitButton will expand a hidden dropdown with a list of the available options.
  • If an item in the dropdown is pressed, the split button header will be updated with the selected command name, and it will be executed.
  • To apply the lastly selected command, just click the button's header, instead of expanding the dropdown again.
  • To apply another command, click on the SplitButton arrow and choose the desired command from the list.
  • DefaultVB.aspx
  • scripts.js
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ 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:RadButton RenderMode="Lightweight" EnableSplitButton="true" ID="SplitButton" AutoPostBack="false"
                    runat="server" Text="Transfer Item" OnClientClicked="OnClientClicked" OnClientLoad="storeSplitButtonReference">
                </telerik:RadButton>
                <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnClientItemClicked" OnClientLoad="storeContextMenuReference">
                    <Items>
                        <telerik:RadMenuItem Text="Transfer Right">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Transfer Left">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadContextMenu>
            </div>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance