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

Templates

    • Choose template...
      • Personal
        • Birthday
        • Anniversary
        • Newborn
        • Wedding
      • Work-related
        • Retirement
        • Congratulations
        • New Job
      • Holidays
        • Christmas
        • Easter
        • Valentines
        • Halloween
  • Color scheme:
  • Pick Color(Current Color is blank)
  • Post

You can apply templates to the RadToolBarButton and RadToolBarSplitButton. You can embed any content inside a template:

  • HTML markup
  • ASP.NET server controls
  • Third-party controls (other Telerik controls as well)

Use the following syntax to specify a template for RadToolBarButton:

<telerik:RadToolBarButton>
	<ItemTemplate>
		<div style="font:bold 11px Tahoma;">
			Name:
			<asp:TextBox id="txtName" runat="server"></asp:TextBox>
		</div>
	</ItemTemplate>
</telerik:RadToolBarButton>

As only RadToolBarButton supports databinding, binding expressions in RadToolBarSplitButton templates are not evaluated.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ToolBar.Examples.Functionality.Templates.DefaultCS"Language="C#"  %>

<%@ 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 rel="stylesheet" type="text/css" href="styles.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">
        <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" Style="overflow: visible;">
            <Items>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" ClickToOpen="true" OnClientItemClicked="ChangeMenuText" runat="server"
                             Width="200px">
                            <Items>
                                <telerik:RadMenuItem>
                                    <ItemTemplate>
                                        <div id="templateContainer">
                                            Choose template...
                                        </div>
                                    </ItemTemplate>
                                    <Items>
                                        <telerik:RadMenuItem Text="Personal">
                                            <Items>
                                                <telerik:RadMenuItem Text="Birthday">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Anniversary">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Newborn">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Wedding">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Work-related">
                                            <Items>
                                                <telerik:RadMenuItem Text="Retirement">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Congratulations">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="New Job">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Holidays">
                                            <Items>
                                                <telerik:RadMenuItem Text="Christmas">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Easter">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Valentines">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="Halloween">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <div style="padding-left: 30px">
                            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" AllowCustomText="true" DataSourceID="SqlDataSource1"
                                DataTextField="ContactName" OnItemDataBound="RadComboBox1_ItemDataBound" EmptyMessage="Recipient"
                                Width="220px" Height="200px">
                            </telerik:RadComboBox>
                        </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <div style="font: bold 11px Tahoma; padding: 0 5px 0 15px;">
                            Color scheme:
                        </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <telerik:RadColorPicker RenderMode="Lightweight" ID="RadColorPicker1" runat="server" ShowIcon="true" Preset="Standard">
                        </telerik:RadColorPicker>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Post" Style="margin-left: 10px;">
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT * FROM [Customers] ORDER BY ContactName">
        </asp:SqlDataSource>
    </div>
    <script type="text/javascript">
        function ChangeMenuText(sender, args) {
            var templateName = args.get_item().get_text();

            var templateContainer = $get('templateContainer');

            templateContainer.innerHTML = templateName + ' template';
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance