External Ribbon

The Bootstrap Spreadsheet provides a UI experience similar to Microsoft Excel Online. It allows you to create intuitive and easy-to-use spreadsheet apps in the shortest possible time.

This demo illustrates how you can customize the Spreadsheet's built-in Ribbon. Based upon the RibbonMode property setting, the Spreadsheet can use either a built-in ribbon, a built-in one-line toolbar, an external ribbon control, or no ribbon. The RibbonMode property values include:

  • Ribbon – The Spreadsheet uses a built-in ribbon; ribbon tabs can be customized using the Spreadsheet's RibbonTabs collection.
  • One Line Ribbon – Default. The Spreadsheet displays a built-in ribbon used in one-line mode optimized for touch devices; one-line mode related settings can be defined for ribbon groups and ribbon galleries with their OneLineModeSettings properties.
  • ExternalRibbon – The Spreadsheet uses an external Bootstrap Ribbon control, specified by the AssociatedRibbonID property. Ribbon tabs can be customized at the Ribbon control level with the Tabs property. The Spreadsheet's CreateDefaultRibbonTabs method can be used to automatically populate the external ribbon with the default ribbon tabs.
  • None – The Spreadsheet does not incorporate or use the ribbon UI.
  • Auto – The Spreadsheet automatically displays a proper built-in ribbon depending upon the client browser type; a standard ribbon is used under desktop browsers and a one-line ribbon is used under the browsers of touch devices.

In this demo, the external Bootstrap Ribbon is used.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
AA
AB
AC
AD
AE
AF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Date
Time
Description
Calories
Carbs
Sugars
Fiber
Notes
10/1/2016
7:00:00 AM
Coffee
10
10
0
0
Morning coffee
10/1/2016
8:00:00 AM
Bagel
10
10
2
10
Light breakfast
10/1/2016
12:00:00 PM
Lunch
350
35
12
45
Turkey sandwich
10/1/2016
7:00:00 PM
Dinner
575
75
32
95
Tater tot casserole
10/2/2016
7:00:00 AM
Coffee
10
10
0
0
Morning coffee
10/2/2016
8:00:00 AM
Toast
10
10
2
10
Light breakfast
10/2/2016
12:00:00 PM
Lunch
325
40
15
55
Sandwich
10/2/2016
7:00:00 PM
Dinner
445
45
45
45
Dinner
10/3/2016
7:00:00 AM
Coffee
10
10
0
0
Morning coffee
10/3/2016
8:00:00 AM
Bagel
10
10
2
10
Light breakfast
10/3/2016
12:00:00 PM
Lunch
50
10
2
2
Salad
10/3/2016
7:00:00 PM
Dinner
456
64
32
22
Dinner
DIET
10/4/2016
7:00:00 AM
Coffee
10
10
5
0
Coffee
10/4/2016
10:00:00 AM
Coffee
10
10
5
0
Coffee
10/4/2016
12:15:00 PM
Lunch
125
15
0
35
Salad
DIETARY ANALYSIS
<dx:BootstrapRibbon ID="RibbonExternal" runat="server" ShowFileTab="false">
    <CssClasses Control="mb-2" />
</dx:BootstrapRibbon>
<dx:BootstrapSpreadsheet runat="server" ActiveTabIndex="0" Height="500px" ShowConfirmOnLosingChanges="False"
    RibbonMode="ExternalRibbon" AssociatedRibbonID="RibbonExternal">
</dx:BootstrapSpreadsheet>
Screen Size
Color Themes
Demo QR Code
Arial