RibbonBar - Templates

  • Home
File
Font
Page Layout
Word
Excel
PowerPoint
OneNote
Export
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

With the RibbonBarTemplateItem you can extend the built-in palette of items RadRibbonBar provides. Inside a template item you can put different content matching your page design needs, e.g.:

  • HTML
  • ASP.NET controls
  • Telerik UI for ASP.NET AJAX

The template takes up one 'group row' (of the total three) in height and is not limited in width. The most suitable template content height is 22px.

Because of the rendering of RadRibbonBar drop downs cannot overflow the group unless they are detached from their initial position in the rendering. In order to overcome this in case the drop downs cannot detach you can apply the following style to RadRibbonBar:

		div.RadRibbonBar .rrbButtonArea,
		div.RadRibbonBar .rrbButtonGroupIn,
		div.RadRibbonBar .rrbControlGroup
		{
			overflow: visible;
		}

This will show all overflowing elements, however it will break the resizing of RadRibbonBar, so we advise you to disable resizing in case the above style is applied.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</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-wide">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="File">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Vertical">
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Open" AutoPostBack="false"
                                    Width="100px">
                                    <Icon PrimaryIconCssClass="rbOpen" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                                </telerik:RadButton>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Text="Save" AutoPostBack="false"
                                    Width="100px">
                                    <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                                </telerik:RadButton>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" Text="Print" AutoPostBack="false"
                                    Width="100px">
                                    <Icon PrimaryIconCssClass="rbPrint" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                                </telerik:RadButton>
                            </telerik:RibbonBarTemplateItem>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Font">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Horizontal">
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="120px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Cambria"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Calibri" Selected="true"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Arial"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Book Antiqua"></telerik:RadComboBoxItem>
                                    </Items>
                                </telerik:RadComboBox>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarTemplateItem>
                                    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Width="68px">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="8"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="9"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="10"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="11" Selected="true"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="12"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="14"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="16"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="18"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="20"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="22"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="24"></telerik:RadComboBoxItem>
                                        </Items>
                                    </telerik:RadComboBox>
                                </telerik:RibbonBarTemplateItem>
                            </telerik:RibbonBarControlGroup>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Page Layout">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Vertical">
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadNumericTextBox RenderMode="Lightweight" Width="140px" ShowSpinButtons="true" Value="0" IncrementSettings-Step=".1"
                                    Label="Top:" runat="server">
                                </telerik:RadNumericTextBox>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadNumericTextBox RenderMode="Lightweight" Width="140px" ShowSpinButtons="true" Value="0" IncrementSettings-Step=".1"
                                    Label="Bottom:" runat="server">
                                </telerik:RadNumericTextBox>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadNumericTextBox RenderMode="Lightweight" Width="140px" ShowSpinButtons="true" Value="0" IncrementSettings-Step=".1"
                                    Label="Indent:" runat="server">
                                </telerik:RadNumericTextBox>
                            </telerik:RibbonBarTemplateItem>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Export">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Horizontal">
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadBinaryImage runat="server" ImageUrl="images/Word.png" ToolTip="Word" AlternateText="Word">
                                </telerik:RadBinaryImage>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadBinaryImage runat="server" ImageUrl="images/Excel.png" ToolTip="Excel" AlternateText="Excel">
                                </telerik:RadBinaryImage>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadBinaryImage runat="server" ImageUrl="images/PowerPoint.png" ToolTip="PowerPoint"
                                    AlternateText="PowerPoint"></telerik:RadBinaryImage>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem>
                                <telerik:RadBinaryImage runat="server" ImageUrl="images/OneNote.png" ToolTip="OneNote"
                                    AlternateText="OneNote"></telerik:RadBinaryImage>
                            </telerik:RibbonBarTemplateItem>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?