Syncfusion Aspnetmvc Ribbon

Syncfusion ASP.NET MVC Ribbon Control

A comprehensive skill for implementing the Syncfusion EJ2 Ribbon control in ASP.NET MVC (Razor/HTML Helper) applications. Covers the full feature set: structure, items, layouts, menus, keytips, events, and programmatic control.

Quick Start Example

@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation and setup
• Namespace and script/style references
• ScriptManager registration
• Root ribbon configuration: SelectedTab, Width, CssClass, Locale, EnableRtl, EnablePersistence, TabAnimation
• First ribbon render with tabs, groups, collections, items
• Full working example

Tabs, Groups, Collections & Items Structure

📄 Read: references/tabs-groups-items.md

• Adding and configuring tabs (Header, Id, KeyTip)
• Adding groups (Header, Orientation, GroupIconCss, ShowLauncherIcon, IsCollapsible, Priority)
• Adding collections and items (Collections, Items, Type)
• Launcher icon — enabling and customizing
• Group collapse/expand priority on resize

Built-in Ribbon Items

📄 Read: references/built-in-items.md

• Button — toggle, icon, content, IsToggle
• CheckBox — checked state, label, LabelPosition
• DropDown — Target, CreatePopupOnClick, BeforeItemRender
• SplitButton — Target, popup items
• ComboBox — AllowFiltering, Index, SortOrder
• ColorPicker — Value
• GroupButton — Items, Selection (Single/Multiple), simplified mode behavior
• Gallery — groups, items, ItemCount, SelectedItemIndex, PopupWidth, PopupHeight, templates
• Template — custom HTML items (ItemTemplate)
• DisplayOptions — Classic / Simplified / Overflow / Auto
• Disabled, AllowedSizes, ActiveSize

Layouts & Resizing

📄 Read: references/layouts-resizing.md

• Classic layout — item sizes (Large/Medium/Small), orientation (Row/Column)
• Simplified layout — single-row mode, group overflow popup
• Minimized state (IsMinimized)
• Show/hide layout switcher (HideLayoutSwitcher)
• Resize behavior and AllowedSizes / ActiveSize

Backstage View

📄 Read: references/backstage.md

• Enabling backstage (BackStageMenu property)
• Adding backstage items (Items, Content, IconCss, Id)
• Footer items (IsFooter)
• Separators (Separator)
• Back button (BackButton, Text, IconCss, Visible)
• Backstage target (Target)
• Custom template (Template)
• Setting width, height, and header height
• Auto-close behavior on item click (AutoClose)
• Auto-close and header height customization

File Menu

📄 Read: references/file-menu.md

• Enabling file menu (FileMenu, Visible)
• Adding menu items (MenuItems)
• Open submenu on click (ShowItemOnClick)
• Custom header text (Text)

Contextual Tabs

📄 Read: references/contextual-tabs.md

• Adding contextual tabs (ContextualTabs)
• Controlling visibility (Visible)
• Selected state (IsSelected)
• ShowTab and HideTab methods

Keytips & Tooltips

📄 Read: references/keytips-tooltips.md

• Enabling keytips (EnableKeyTips)
• Keytips on items, groups, tabs, file menu, backstage, layout switcher, launcher icon
• showKeyTips / hideKeyTips methods
• Keytip guidelines and gotchas
• Tooltip title, content, icon, and ShowDelay (RibbonTooltipSettings)
• Tooltip CSS customization (CssClass)

Events & Methods

📄 Read: references/events-methods.md

• Ribbon-level events: Created, TabSelected, TabSelecting, RibbonCollapsing, RibbonExpanding, RibbonLayoutSwitched, LauncherIconClick, OverflowPopupOpen, OverflowPopupClose (with arg documentation)
• Item events: Button, CheckBox, ColorPicker, ComboBox, DropDown, SplitButton, GroupButton, Gallery, FileMenu, Backstage
• Dynamic methods: addTab, addGroup, addCollection, addItem
• Removal methods: removeTab, removeGroup, removeCollection, removeItem
• Item state methods: enableItem, disableItem, showItem, hideItem, getItem, updateItem
• Group state methods: enableGroup, disableGroup, showGroup, hideGroup, updateGroup
• Tab state methods: selectTab, showTab, hideTab, enableTab, disableTab, updateTab
• Collection methods: updateCollection
• Layout methods: selectTab, refreshLayout

Common Patterns

Pattern: Clipboard Group (Classic)

group.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Collections(collection =>
{
    collection.Items(items =>
    {
        items.Type(RibbonItemType.SplitButton).AllowedSizes(RibbonItemSize.Large)
            .SplitButtonSettings(sb => { sb.IconCss("e-icons e-paste").Content("Paste").Items(pasteOptions); }).Add();
    }).Add();
    collection.Items(items =>
    {
        items.Type(RibbonItemType.Button).ButtonSettings(b => { b.IconCss("e-icons e-cut").Content("Cut"); }).Add();
        items.Type(RibbonItemType.Button).ButtonSettings(b => { b.IconCss("e-icons e-copy").Content("Copy"); }).Add();
    }).Add();
}).Add();

Pattern: Font Group (Row Orientation)

group.Header("Font").Orientation(ItemOrientation.Row).GroupIconCss("e-icons e-bold").Collections(collection =>
{
    collection.Items(items =>
    {
        items.Type(RibbonItemType.ComboBox).ComboBoxSettings(cb => { cb.DataSource(fontStyle).Index(3).AllowFiltering(true).Width("150px"); }).Add();
        items.Type(RibbonItemType.ComboBox).ComboBoxSettings(cb => { cb.DataSource(fontSize).Index(3).Width("65px"); }).Add();
    }).Add();
}).Add();

Pattern: Help Pane Template

@Html.EJS().Ribbon("ribbon").HelpPaneTemplate("#helpPaneTemplate").Tabs(...).Render()

<script type="text/x-jsrender" id="helpPaneTemplate">
    <button class="action_btn"><span class="e-icons e-undo"></span> Undo</button>
    <button class="action_btn"><span class="e-icons e-redo"></span> Redo</button>
</script>

Key Properties Reference