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

Content Template

It is possible to add complex content (i.e., server controls and HTML elements) in a RadSplitButton instead of plain text.

In order to add controls to the RadSplitButton in the markup, you should place them directly in the composite ContentTemplate property.

You can further extend the appearance customization by using Templates inside the embedded ContextMenu .

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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:RadSplitButton runat="server" ID="RadSplitButton1" Text="Option 1" CommandName="Command1" PersistChangesFromContextMenu="false" Skin="Bootstrap">
            <ContentTemplate>
                <div style="overflow: hidden;">
                    <img style="margin-top: -16px;" src="Icons/flip.png" />
                </div>
                <div style="font-size: 16px; padding-top: 10px;">Flip</div>
                <telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" Enabled="false" Skin="Bootstrap"
                    Value="3" SelectionMode="Continuous" ItemCount="5" />

                <div onclick="splitPartClick(this,event);"><span class="rbIcon p-icon rbSplitIcon p-i-arrow-down"></span></div>
            </ContentTemplate>
            <ContextMenu>
                <Items>
                    <telerik:RadMenuItem Text="Flip Horizontally" Value="FlipHorizontally">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Flip Vertically" Value="FlipVertically">
                    </telerik:RadMenuItem>
                </Items>
            </ContextMenu>
        </telerik:RadSplitButton>
        <script>
            function splitPartClick(splitPart, ev) {
                ev.preventDefault();
                ev.stopPropagation();
                var splitButton = splitPart.closest('.RadSplitButton').control;
                splitButton.openContextMenu(true);
            }
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance