Custom Ribbon

Mar 19, 2021
3 minutes to read

The ASPxSpreadsheet control allows you to customize its ribbon at design time and run time, provides a set of display styles, and supports external ribbons.

View Demo: Spreadsheet - Client-Side Events

Select Ribbon Display Style

Use the RibbonMode property to specify the ribbon display style. The property accepts the following values:

Ribbon (default value) - Displays the default ribbon.
OneLineRibbon - Displays a ribbon in one-line mode. Optimized for touch devices.

ASPX
aspx
<dx:ASPxSpreadsheet ID="Spreadsheet" runat="server" RibbonMode="OneLineRibbon">
</dx:ASPxSpreadsheet>
One-line mode related settings can be defined for ribbon groups and ribbon galleries.

Auto - The display style is determined automatically based on the type of device. A Ribbon is used in browsers on non-touch devices, and the OneLineRibbon for browsers on touch devices.
None - The ribbon is hidden.

ASPX

aspx

<dx:ASPxSpreadsheet ID="Spreadsheet" runat="server" RibbonMode="None">
</dx:ASPxSpreadsheet>

ExternalRibbon - Displays the standalone ASPxRibbon control as a toolbar.

Runtime Customization

You can customize the ribbon tab collection at runtime as follows:

Call the CreateDefaultRibbonTabs(Boolean) method to populate the ribbon with the default spreadsheet ribbon tabs.
Use the SpreadsheetRibbonTabCollection object’s members to customize the ribbon tab collection.
CS
VB.NET

using DevExpress.Web;
using DevExpress.Web.ASPxThemes;
...
//creates default ribbon tabs
ASPxSpreadsheet1.CreateDefaultRibbonTabs(true);

//creates a custom item
var CustomOptionButton = new RibbonOptionButtonItem("CustomOption", "Custom option", RibbonItemSize.Large);
CustomOptionButton.OptionGroupName = "Group1";
CustomOptionButton.LargeImage.IconID = IconID.ZoomZoom232x32;
CustomOptionButton.SmallImage.IconID = IconID.ZoomZoom216x16gray;

//adds the custom item to the ribbon
ASPxSpreadsheet1.RibbonTabs.Find(t => t.Text == "Home").Groups.Add("Custom Ribbon Group").Items.Add(CustomOptionButton);

Imports DevExpress.Web
Imports DevExpress.Web.ASPxThemes
...
'creates default ribbon tabs
ASPxSpreadsheet1.CreateDefaultRibbonTabs(True)

'creates a custom item
Dim CustomOptionButton = New RibbonOptionButtonItem("CustomOption", "Custom option", RibbonItemSize.Large)
CustomOptionButton.OptionGroupName = "Group1"
CustomOptionButton.LargeImage.IconID = IconID.ZoomZoom232x32;
CustomOptionButton.SmallImage.IconID = IconID.ZoomZoom216x16gray;

'adds the custom item to the ribbon
ASPxSpreadsheet1.RibbonTabs.Find(Function(t) t.Text = "Home").Groups.Add("Custom Ribbon Group").Items.Add(CustomOptionButton)

Design-Time Customization

Use the RibbonTabs property to access the ribbon settings. If the tab collection is empty and the RibbonMode property is set to Ribbon , the default tabs are displayed.

You can implement default and custom ribbon elements. Default ribbon elements have the SR prefix (Spreadsheet Ribbon).

ASPX

aspx

<dx:ASPxSpreadsheet ID="Spreadsheet" runat="server">
    <RibbonTabs>
        <dx:RibbonTab Text="Commands">
            <Groups>
                <dx:SRFileCommonGroup>
                    <Items>
                        <dx:SRFileNewCommand />
                        <dx:SRFilePrintCommand />
                    </Items>
                </dx:SRFileCommonGroup>
                <dx:SRViewGroup>
                    <Items>
                        <dx:SRFullScreenCommand />
                    </Items>
                </dx:SRViewGroup>
                <dx:RibbonGroup Name="Custom Ribbon Group" Text="Custom Ribbon Group">
                    <Image IconID="scheduling_switchtimescalesto_32x32gray"></Image>
                    <Items>
                        <dx:RibbonOptionButtonItem Name="CustomOption" OptionGroupName="Group1" Size="Large" Text="Custom option">
                            <LargeImage IconID="zoom_zoom2_32x32"></LargeImage>
                            <SmallImage IconID="zoom_zoom2_16x16gray"></SmallImage>
                        </dx:RibbonOptionButtonItem>
                        <dx:RibbonDropDownButtonItem Size="Large" DropDownMode="false" Text="Custom DropDown Toggle Buttons">
                            <LargeImage IconID="data_editdatasource_32x32"></LargeImage>
                            <SmallImage IconID="data_editdatasource_16x16gray"></SmallImage>
                            <Items>
                                <dx:RibbonDropDownToggleButtonItem Name="DropDownToggleButton1" Text="DropDown Toggle Button 1">
                                </dx:RibbonDropDownToggleButtonItem>
                                <dx:RibbonDropDownToggleButtonItem Name="DropDownToggleButton2" Text="DropDown Toggle Button 2">
                                </dx:RibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:RibbonDropDownButtonItem>
                    </Items>
                </dx:RibbonGroup>
            </Groups>
        </dx:RibbonTab>
    </RibbonTabs>
</dx:ASPxSpreadsheet>

You can use the Designer dialog in the ASPxSpreadsheet to customize the ribbon. To invoke the designer, use one of the following approaches.

Click the ASPxSpreadsheet’s smart tag and select Designer.
Right-click the ASPxSpreadsheet and click Designer.
Select Designer in the Properties window.

You can create a new ribbon or click Create Default Tabs to modify the default tab collection.

External Ribbon

The ASPxSpreadsheet control allows you to link a standalone ASPxRibbon control and populate it with pre-defined tabs, groups, and actions. To do this, set the RibbonMode property to ExternalRibbon and specify the AssociatedRibbonID property. Ribbon tabs can be customized at the ASPxRibbon control level.

aspx

<dx:ASPxRibbon ID="ASPxRibbon1" runat="server" ShowFileTab="false">
</dx:ASPxRibbon>
<dx:ASPxSpreadsheet ID="Spreadsheet" runat="server" RibbonMode="ExternalRibbon" AssociatedRibbonID="ASPxRibbon1">
</dx:ASPxSpreadsheet>

Populate an External Ribbon with Default Spreadsheet Tabs

At runtime

Call the CreateDefaultRibbonTabs(Boolean) method to populate the external ribbon with the default spreadsheet tabs.
csharp
Spreadsheet.CreateDefaultRibbonTabs(true);

At design time

Click the Create Default Ribbon Tabs command in the control’s smart tag to populate an external ribbon markup with the default spreadsheet tabs.