Tab
A newer version of this page is available. Switch to the current version.

ASPxRibbon Class

A ribbon control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

public class ASPxRibbon :
    ASPxHierarchicalDataWebControl,
    IParentSkinOwner,
    ISkinOwner,
    IPropertiesOwner,
    IControlDesigner,
    IRequiresLoadPostDataControl
Public Class ASPxRibbon
    Inherits ASPxHierarchicalDataWebControl
    Implements IParentSkinOwner,
               ISkinOwner,
               IPropertiesOwner,
               IControlDesigner,
               IRequiresLoadPostDataControl

Remarks

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

ASPxRibbpn Class

Create a Ribbon

Design Time

The ASPxRibbon control is available on the DX.18.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

ASPxRibbon Toolbox

Drag the control onto a form and customize control settings, or paste the control markup in the page's source code.

<dx:ASPxRibbon ID="ASPxRibbon1" runat="server">
    <Tabs>
        <dx:RibbonTab Name="Home" Text="Home" />
        <dx:RibbonTab Name="Insert" Text="Insert" />
    </Tabs>
</dx:ASPxRibbon>

Run Time

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e) {
    ASPxRibbon ribbon = new ASPxRibbon();
    ribbon.ID = "ASPxRibbon1";

    RibbonTab tab1 = new RibbonTab("Home");
    RibbonTab tab2 = new RibbonTab("Insert");
    ribbon.Tabs.Add(tab1);
    ribbon.Tabs.Add(tab2);

    // Adds the created control to the page
     Page.Form.Controls.Add(ribbon1);
}

Client-Side API

The ASPxRibbon's client-side API is implemented with JavaScript language 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);
}

Common Concept

ASPxRibbon_Common_Concept

The ribbon stores a set of tabs (RibbonTab) in the Tabs collection. You can specify an individual tab's header text (Text), name (Name) and the visibility (Visible).

<dx:ASPxRibbon ID="ASPxRibbon1" ...>
    <Tabs>
        <dx:RibbonTab Name="Home" Text="Home" />
        <dx:RibbonTab Name="Insert" Text="Insert" Visible="False" />
    </Tabs>
</dx:ASPxRibbon>

To hide all tab headers, set the ASPxRibbon.ShowTabs property to false.

<dx:ASPxRibbon ID="ASPxRibbon1" ShowTabs="False" >
</dx:ASPxRibbon>

The "File" tab is the first tab in the ribbon's header. Its visibility depends on the ASPxRibbon.ShowFileTab property value. Note that the ribbon does not store the "File" tab in the tab collection (RibbonTabCollection).

<dx:ASPxRibbon ID="ASPxRibbon1" runat="server" ShowFileTab="False" >
</dx:ASPxRibbon>

A tab (RibbonTab) contains groups (RibbonGroup) with items (RibbonItemBase). You can use the RibbonTab.Groups and RibbonGroup.Items properties to access groups and group items in a tab.

Use the RibbonGroup.Text property to specify a group's label. To hide all group labels in the ribbon, set the ASPxRibbon.ShowGroupLabels property to false.

<dx:ASPxRibbon ID="ASPxRibbon1" ShowGroupLabels="False" ...>
    <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>
    </Tabs>
</dx:ASPxRibbon>

Features

Data Binding

Use the ASPxHierarchicalDataWebControl.DataSourceID or ASPxDataWebControlBase.DataSource property to bind the ribbon to a data source.

<dx:ASPxRibbon ID="Ribbon" runat="server" DataSourceID="RibbonDataSource" />

Mappings specify which field in a data source corresponds to an object's property.

Object

Mappings

Tab

ASPxRibbon.TabDataFields

Group

ASPxRibbon.GroupDataFields

Item

ASPxRibbon.ItemDataFields

More details | See demo

Item Types

The ribbon allows you to use different editors as items (button, text box, combo box and others).

<dx:ASPxRibbon ID="ASPxRibbon1" ShowGroupLabels="False" ...>
    <Tabs>
        <dx:RibbonTab Name="Home" Text="Home">
            <Groups>
                <dx:RibbonGroup Name="Clipboard" Text="Clipboard">
                    <Items>
                        <dx:RibbonButtonItem Name="Cut" Text="Cut" />
                        <dx:RibbonComboBoxItem Name="Font Family">
                            // ...
                        </dx:RibbonComboBoxItem>
                    </Items>
                </dx:RibbonGroup>
            </Groups>
        </dx:RibbonTab>
    </Tabs>
</dx:ASPxRibbon>

More details

The ribbon provides a gallery bar (RibbonGalleryBarItem) and drop-down gallery (RibbonGalleryDropDownItem) items to display image lists in the ribbon.

ASPxRibbon_GalleryBarItem

<dx:ASPxRibbon ID="ASPxRibbon1" ShowGroupLabels="False" ...>
    <Tabs>
        <dx:RibbonTab Text="Home">
            <Groups>
                <dx:RibbonGroup Text="Font">
                    <Items>
                        <!-- Gallery Bar -->
                        <dx:RibbonGalleryBarItem >
                            <Groups>
                                <dx:RibbonGalleryGroup>
                                    <Items>
                                        ...
                                    </Items>
                                </dx:RibbonGalleryGroup>
                            </Groups>
                        </dx:RibbonGalleryBarItem>

                        <!-- Drop-Down Gallery -->
                        <dx:RibbonGalleryDropDownItem >
                            <Groups>
                                <dx:RibbonGalleryGroup>
                                    <Items>
                                        ...
                                    </Items>
                                </dx:RibbonGalleryGroup>
                            </Groups>
                        </dx:RibbonGalleryDropDownItem>
                    </Items>
                </dx:RibbonGroup>
            </Groups>
        </dx:RibbonTab>
    </Tabs>
</dx:ASPxRibbon>

More details | See demo

Context Tabs

The ribbon supports context tabs (RibbonContextTabCategory) and stores them in the ContextTabCategories collection.

<dx:ASPxRibbon ID="ASPxRibbon1" ShowGroupLabels="False" ...>
    <Tabs>
        ...
    </Tabs>
    <Co