Ribbon

  • 2 min to read

The ASPxRibbon control is a tabbed toolbar that allows you to place command items on different tabs.

DevExpress ASP.NET Ribbon Overview

<dx:ASPxRibbon ID="ASPxRibbon1" ...>
    <Tabs>
        <dx:RibbonTab Name="Home" Text="Home">
            <Groups>
                <dx:RibbonGroup Name="Clipboard" Text="Clipboard">
                    <Items>
                        <dx:RibbonButtonItem Name="Cut" Text="Cut" />
                        <dx:RibbonButtonItem Name="Copy" Text="Copy" />
                    </Items>
                </dx:RibbonGroup>
            </Groups>
        </dx:RibbonTab>
        <!-- Ribbon structure -->
    </Tabs>
</dx:ASPxRibbon>

Common Concept

The ASPxRibbon control stores tabs in the Tabs collection. Each tab is a (RibbonTab) instance that contains groups (RibbonGroup) with items (RibbonItemBase) in the RibbonTab.Groups and RibbonGroup.Items collections.

Client-Side API

The ASPxRibbon's client-side API is implemented with JavaScript and exposed by the ASPxClientRibbon object.

Availability

Available by default.

Class name

ASPxClientRibbon

Access name

ClientInstanceName

Events

ASPxRibbon.ClientSideEvents

<dx:ASPxRibbon ID="ASPxRibbon1" runat="server" ClientInstanceName="ribbon">
    //...
</dx:ASPxRibbon>
function buttonClick(){
    // Makes a tab with the specified index active.
    ribbon.SetActiveTabIndex(2);
}

Features

  • Data-Bound Mode

    The ribbon supports data-bound mode. You can obtain information about tabs, groups, and items from a data source.

    More details | See demo

  • Supported Item Types

    The ribbon allows you to use different editors (button, text box, combo box, and so on) and galleries (gallery bar and drop-down gallery) as items.

    More details | See demo

  • Context Tabs

    Context tabs combine different items into categories. These tabs appear on the ribbon when users select objects.

    More details | See demo

  • Template

    You can provide a custom structure and content for the ribbon's file tabs and items.

    More details | See demo

  • One-Line Mode

    The ribbon can display all items within an active tab in one line to make the ribbon more compact.

    More details | See demo