Back to Devexpress

Ribbon

aspnet-16099-components-site-navigation-and-layout-ribbon.md

latest2.3 KB
Original Source

Ribbon

  • Jun 18, 2021
  • 2 minutes to read

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

aspx
<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.

| |

Client object type

|

ASPxClientRibbon

| |

Access name

|

ASPxRibbon.ClientInstanceName

| |

Events

|

ASPxRibbon.ClientSideEvents

|

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

Features

  • Data-Bound Mode

  • Supported Item Types

  • Context Tabs

  • Template

  • One-Line Mode