ejRibbon
11 Jul 201824 minutes to read
The ribbon can be easily configured to the DOM element, such as div. You can create a ribbon with a highly customizable look and feel.
Syntax
$(element).ejRibbon();Example
<div id="Ribbon"></div>
<script>
// Create Ribbon
$('#Ribbon').ejRibbon();
</script>Requires
- module:jQuery
- module:ej.core.js
- module:ej.data.js
- module:ej.globalize.min.js
- module:ej.waitingpopup.min.js
- module:ej.dropdownlist.js
- module:ej.button.js
- module:ej.tab.js
- module:ej.splitbutton.js
- module:ej.ribbon.js
- module:ej.menu.js
- module:ej.scroller.js
- module:ej.checkbox.js
- module:ej.togglebutton.js
Members
allowResizing boolean
Enables the ribbon resize feature.allowResizing is a deprecated property of isResponsive.
Default Value
- false
Example
<ul id="ribbon">
<li>
<a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
allowResizing: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Clipboard",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "cut",
text: "Cut"
}, {
id: "copy",
text: "Copy"
}, {
id: "paste",
text: "Paste"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}, {
text: "Font",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "bold",
text: "Bold"
}, {
id: "italic",
text: "Italic"
}, {
id: "underline",
text: "Underline"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}, {
text: "Alignment",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "left",
text: " Left"
}, {
id: "center",
text: "Center"
}, {
id: "right",
text: "Right"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}]
}]
});
});
</script>isResponsive boolean
When set to true, adapts the Ribbon layout to fit the screen size of devices on which it renders.
Default Value
- false
Example
<ul id="ribbon">
<li>
<a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
isResponsive: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Clipboard",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "cut",
text: "Cut"
}, {
id: "copy",
text: "Copy"
}, {
id: "paste",
text: "Paste"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}, {
text: "Font",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "bold",
text: "Bold"
}, {
id: "italic",
text: "Italic"
}, {
id: "underline",
text: "Underline"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}, {
text: "Alignment",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "left",
text: " Left"
}, {
id: "center",
text: "Center"
}, {
id: "right",
text: "Right"
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 75
}
}]
}]
}]
});
});
</script>buttonDefaults Object
Specifies the height, width, enableRTL, showRoundedCorner,enabled,cssClass property to the controls in the ribbon commonly and
it will work only when those properties are not defined in buttonSettings and content defaults.
Default Value:
- Object
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script>
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
buttonDefaults: {
width: 50,
height: 40,
showRoundedCorner: true
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 70,
height: 50
}
}]
}]
}]
}]
});
});
</script>showQAT boolean
Property to enable the ribbon quick access toolbar.
Default Value:
- false
Example
<ul id="ribbon">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "100%",
showQAT: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Font",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "bold",
text: "Bold",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon bold"
}
}, {
id: "italic",
text: "Italic",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonitalic"
}
}, {
id: "underline",
text: "Underline",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonunderline"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 30
}
}]
}]
}]
});
});
</script>cssClass string
Sets the root CSS class for Ribbon which allow us to customize the appearance.
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script>
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
cssClass: "customCss",
buttonDefaults: {
width: 50,
height: 40,
showRoundedCorner: true
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 70,
height: 50
}
}]
}]
}]
}]
});
});
</script>collapsePinSettings Object
Sets custom setting to the collapsible pin in the ribbon.
Default Value:
- Object
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
collapsePinSettings: {
toolTip: "Pin the Ribbon"
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}],
});
});
</script>collapsePinSettings.toolTip string
Sets tooltip for the collapse pin .
Default Value:
- null
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
collapsePinSettings: {
toolTip: "Pin the Ribbon"
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}],
});
});
</script>collapsePinSettings.customToolTip Object
Specifies the custom tooltip for collapse pin.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.
Default Value:
- Object
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
collapsePinSettings:{
customToolTip:{
title: "Pin the Ribbon",
content: "<h6>Keep it open while you work</h6>"
}
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}],
});
});
</script>enableOnDemand boolean
Set enableOnDemand as true to load ribbon tab and backstage contents while corresponding item clicked.
Default Value:
- false
Example
<div id="defaultRibbon"></div>
<div id="infoCon" style="display:none">
<div style="display:table-cell;padding-top:10px">
<table>
<tr>
<td style="vertical-align: top;padding-left:10px">
<span class="e-bsptitle" style="font-size:18px">Protect Workbook</span>
<span style="display:block">Control what types of changes people can make to this workbook.</span>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings: {
toolTip: "Collapse the Ribbon"
},
collapsePinSettings: {
toolTip: "Pin the Ribbon"
},
enableOnDemand: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE", height: 350, width: 1000, headerWidth: 120, pages: [
{ id: "info", text: "Info", contentID: "infoCon", itemType: ej.Ribbon.ItemType.Tab },
{ id: "close", text: "Close", itemType: ej.Ribbon.ItemType.Button }
]
}
},
tabs: [{
id: "home", text: "HOME", groups: [{
text: "Clipboard", alignType: ej.Ribbon.AlignType.Columns, enableGroupExpander: true, groupExpanderSettings: {
toolTip: "Clipboard"
}, content: [{
groups: [{
id: "paste",
text: "paste",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-ribbonpaste"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
isBig: true,
width: 50,
height: 70
}
},
{
groups: [{
id: "cut",
text: "Cut",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribboncut"
}
},
{
id: "copy",
text: "Copy",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribboncopy"
}
},
{
id: "clear",
text: "Clear",
toolTip: "Clear All",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon clearAll"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
isBig: false
}
}]
},
]
},
{
id: "layout", text: "LAYOUT", groups: [
{
text: "Print Layout", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "printLayout",
text: "Print Layout",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-printlayout"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 80,
height: 70
}
}]
}]
}]
});
});
</script>collapsible boolean
Set collapsible property as true to render ribbon in initially collapsed state.
Default Value:
- false
Example
<div id="defaultRibbon"></div>
<div id="infoCon" style="display:none">
<div style="display:table-cell;padding-top:10px">
<table>
<tr>
<td style="vertical-align: top;padding-left:10px">
<span class="e-bsptitle" style="font-size:18px">Protect Workbook</span>
<span style="display:block">Control what types of changes people can make to this workbook.</span>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings: {
toolTip: "Collapse the Ribbon"
},
collapsePinSettings: {
toolTip: "Pin the Ribbon"
},
enableOnDemand: true,
collapsible:true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE", height: 350, width: 1000, headerWidth: 120, pages: [
{ id: "info", text: "Info", contentID: "infoCon", itemType: ej.Ribbon.ItemType.Tab },
{ id: "close", text: "Close", itemType: ej.Ribbon.ItemType.Button }
]
}
},
tabs: [{
id: "home", text: "HOME", groups: [{
text: "Clipboard", alignType: ej.Ribbon.AlignType.Columns, enableGroupExpander: true, groupExpanderSettings: {
toolTip: "Clipboard"
}, content: [{
groups: [{
id: "paste",
text: "paste",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-ribbonpaste"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
isBig: true,
width: 50,
height: 70
}
},
{
groups: [{
id: "cut",
text: "Cut",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribboncut"
}
},
{
id: "copy",
text: "Copy",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribboncopy"
}
},
{
id: "clear",
text: "Clear",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon clearAll"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
isBig: false
}
}]
},
]
},
{
id: "layout", text: "LAYOUT", groups: [
{
text: "Print Layout", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "printLayout",
text: "Print Layout",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-printlayout"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 80,
height: 70
}
}]
}]
}]
});
});enableRTL boolean
Align content in the ribbon control from right to left by setting the property as true.
Default Value:
- false
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>ملف</a>
<ul>
<li><a>جديد</a></li>
<li><a>فتح</a></li>
<li><a>حفظ</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#defaultRibbon").ejRibbon({
width: "100%",
enableRTL: true,
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "ribbon", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "منزل", groups: [{
text: "جديد", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "new",
text: "جديد",
toolTip: "جديد",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 80
}
}]
},
]
},
]
});
});
</script>expandPinSettings Object
Sets custom setting to the expandable pin in the ribbon.
Default Value:
- Object
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings:{
toolTip: "Collapse the Ribbon"
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}],
}],
}]
});
});
</script>expandPinSettings.toolTip string
Sets tooltip for the expand pin.
Default Value:
- null
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings:{
toolTip: "Collapse the Ribbon"
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}],
}],
}]
});
});
</script>expandPinSettings.customToolTip Object
Specifies the custom tooltip for expand pin.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.
Default Value:
- Object
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings:{
customToolTip:{
title: "Collapse the Ribbon",
content: "<h6>Click the icon to collapse the Ribbon.</h6>"
}
},
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-ribbon e-new",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}],
}],
}]
});
});
</script>applicationTab Object
Specifies the application tab to contain application menu or backstage page in the ribbon control.
Default Value:
- Object
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings Object
Specifies the ribbon backstage page items.
Default Value:
- Object
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.text string
Specifies the display text of application tab.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.height string|number
Specifies the height of ribbon backstage page.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.width string|number
Specifies the width of ribbon backstage page.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages Array
Specifies the ribbon backstage page with its tab and button elements.
Default Value:
- Array
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages.id string
Specifies the id for ribbon backstage page’s tab and button elements.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages.text string
Specifies the text for ribbon backstage page’s tab header and button elements.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages.itemType enum
Specifies the type for ribbon backstage page’s contents. Set “ej.Ribbon.BackStageItemType.Tab” to render the tab or “ej.Ribbon.BackStageItemType.Button” to render the button.
Default Value:
- ej.Ribbon.ItemType.Tab
| Name | Description |
|---|---|
| Button | To render the button for ribbon backstage page’s contents |
| Tab | To render the tab for ribbon backstage page’s contents |
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages.contentID string
Specifies the id of HTML elements like div,ul, etc., as ribbon backstage page’s tab content.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.pages.enableSeparator boolean
Specifies the separator between backstage page’s tab and button elements.
Default Value:
- false
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.backstageSettings.headerWidth string|number
Specifies the width of backstage page header that contains tabs and buttons.
Default Value:
- null
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>applicationTab.menuItemID string
Specifies the ID of ul list to create application menu in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button </button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
}]
}]
});
});
</script>applicationTab.menuSettings Object
Specifies the menu members, events by using the menu settings for the menu in the application tab.
Default Value:
- Object
<ts ref = “ej.Menu.Model” />
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
}]
}]
});
});
</script>applicationTab.type enum
Specifies the application menu or backstage page. Specify the type of application tab as “ej.Ribbon.ApplicationTabType.Menu” to render the application menu or “ej.Ribbon.ApplicationTabType.Backstage” to render backstage page in the ribbon control.
Default Value:
- ej.Ribbon.ApplicationTabType.Menu
| Name | Description |
|---|---|
| Menu | applicationTab display as menu |
| Backstage | applicationTab display as backstage |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
}]
}]
});
});
</script>contextualTabs Array
Specifies the contextual tabs and tab set to the ribbon control with the background color and border color. Refer to the tabs section for adding tabs into the contextual tab and contextual tab set.
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<button id="design">Design button</button>
<button id="div1">First button</button>
<button id="div2">Second button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
contextualTabs: [{
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style Options",
type: "custom",
contentID: "design"
}]
}]
}, {
borderColor: "lightblue",
backgroundColor: "blue",
tabs: [{
id: "tabset1",
text: "Tabset1",
groups: [{
text: "Tabset1 Styles",
type: "custom",
contentID: "div1"
}]
}, {
id: "tabset2",
text: "Tabset2",
groups: [{
text: "Tabset2 Styles",
type: "custom",
contentID: "div2"
}]
}]
}]
});
});
</script>contextualTabs.backgroundColor string
Specifies the backgroundColor of the contextual tabs and tab set in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<button id="design">Design button</button>
<button id="div1">First button</button>
<button id="div2">Second button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
contextualTabs: [{
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style Options",
type: "custom",
contentID: "design"
}]
}]
}, {
borderColor: "lightblue",
backgroundColor: "blue",
tabs: [{
id: "tabset1",
text: "Tabset1",
groups: [{
text: "Tabset1 Styles",
type: "custom",
contentID: "div1"
}]
}, {
id: "tabset2",
text: "Tabset2",
groups: [{
text: "Tabset2 Styles",
type: "custom",
contentID: "div2"
}]
}]
}]
});
});
</script>contextualTabs.borderColor string
Specifies the borderColor of the contextual tabs and tab set in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<button id="design">Design button</button>
<button id="div1">First button</button>
<button id="div2">Second button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
contextualTabs: [{
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style Options",
type: "custom",
contentID: "design"
}]
}]
}, {
borderColor: "lightblue",
backgroundColor: "blue",
tabs: [{
id: "tabset1",
text: "Tabset1",
groups: [{
text: "Tabset1 Styles",
type: "custom",
contentID: "div1"
}]
}, {
id: "tabset2",
text: "Tabset2",
groups: [{
text: "Tabset2 Styles",
type: "custom",
contentID: "div2"
}]
}]
}]
});
});
</script>contextualTabs.tabs Array
Specifies the tabs to present in the contextual tabs and tab set. Refer to the tabs section for adding tabs into the contextual tabs and tab set.
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<button id="design">Design button</button>
<button id="div1">First button</button>
<button id="div2">Second button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
contextualTabs: [{
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style Options",
type: "custom",
contentID: "design"
}]
}]
}, {
borderColor: "lightblue",
backgroundColor: "blue",
tabs: [{
id: "tabset1",
text: "Tabset1",
groups: [{
text: "Tabset1 Styles",
type: "custom",
contentID: "div1"
}]
}, {
id: "tabset2",
text: "Tabset2",
groups: [{
text: "Tabset2 Styles",
type: "custom",
contentID: "div2"
}]
}]
}]
});
});
</script>disabledItemIndex Array
Specifies the index or indexes to disable the given index tab or indexes tabs in the ribbon control.
Default Value:
- 0
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button<button>
<button id="insert">Insert button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
// Set the disabledItemIndex during initialization.
disabledItemIndex: [1, 2],
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}, {
id: "insert",
text: "INSERT",
groups: [{
text: "Insert group",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "insert"
}]
}]
});
});
</script>enabledItemIndex Array
Specifies the index or indexes to enable the given index tab or indexes tabs in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button<button>
<button id="insert">Insert button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}, {
id: "insert",
text: "INSERT",
groups: [{
text: "Insert group",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "insert"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
ribbonObj.option({
disabledItemIndex: [1, 2]
});
// Enable the required ribbon tab from the ribbon control.
ribbonObj.option({
enabledItemIndex: [1]
});
</script>selectedItemIndex number
Specifies the index of the ribbon tab to select the given index tab item in the ribbon control.
Default Value:
- 1
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button<button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
// Set the selectedItemIndex during initialization.
selectedItemIndex: 2,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}, {
id: "insert",
text: "INSERT",
groups: [{
text: "Insert group",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "insert"
}]
}]
});
});
</script>tabs Array
Specifies the tabs and its groups. Also specifies the control details that has to be placed in the tab area in the ribbon control.
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<button id="insert">Insert button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}, {
id: "insert",
text: "INSERT",
groups: [{
text: "Insert group",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "insert"
}]
}]
});
});
</script>tabs.groups Array
Specifies single group or multiple groups and its contents to each tab in the ribbon control.
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.groups.alignType enum
Specifies the alignment of controls in the groups in ‘row’ type or ‘column’ type. Value for row type is “ej.Ribbon.AlignType.Rows” and for column type is “ej.Ribbon.alignType.columns”.
Default Value:
- ej.Ribbon.AlignType.Rows
| Name | Description |
|---|---|
| Rows | To align the group content's in row |
| Columns | To align group content's in columns |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.groups.content Array
Specifies the Syncfusion button, split button, dropdown list, toggle button, gallery, custom controls to the groups in the ribbon control.
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.defaults Object
Specifies the height, width, type, isBig property to the controls in the group commonly.
Default Value:
- Object
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70
}
}]
}]
}]
});
});
</script>tabs.groups.content.defaults.height string|number
Specifies the controls height such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70
}
}]
}]
}]
});
});
</script>tabs.groups.content.defaults.width string|number
Specifies the controls width such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 70
}
}]
}]
}]
});
});
</script>tabs.groups.content.defaults.type string
Specifies the controls type such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.
Default Value:
- ej.Ribbon.Type.Button
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 70
}
}]
}]
}]
});
});
</script>tabs.groups.content.defaults.isBig boolean
Specifies the controls size such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.
Default Value:
- false
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 70,
isBig: true
}
}]
}]
}]
});
});
</script>tabs.groups.content.groups Array
Specifies the controls such as Syncfusion button, split button, dropdown list, toggle button, gallery, custom controls in the subgroup of the ribbon tab .
Default Value:
- Array
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.isMobileOnly boolean
When isMobileOnly is true,its shows in mobile toolbar.isResponsive should be true for using this property.
Default Value
- false
Example
<div id="defaultRibbon"></div>
<script type="text/javascript">
$(function () {
$("#defaultRibbon").ejRibbon({
width: "100%",
allowResizing: true,
groupClick: function (args) {
if ($(args.target).hasClass("e-ribGroupContent") && args.targetElement == "resizedGroup")
this.goToMainContent();
},
tabs: [{
id: "home", text: "HOME", groups: [ {
text: "Font", alignType: "rows", content: [{
groups: [{
id: "bold",
type: ej.Ribbon.Type.ToggleButton,
isMobileOnly: true,
toggleButtonSettings: {
contentType: ej.ContentType.ImageOnly,
defaultText: "Bold",
activeText: "Bold",
defaultPrefixIcon: "e-icon e-ribbon e-resbold",
activePrefixIcon: "e-icon e-ribbon e-resbold",
click: "executeAction"
}
},
{
id: "italic",
type: ej.Ribbon.Type.ToggleButton,
isMobileOnly: true,
toggleButtonSettings: {
contentType: ej.ContentType.ImageOnly,
defaultText: "Italic",
activeText: "Italic",
defaultPrefixIcon: "e-icon e-ribbon e-resitalic",
activePrefixIcon: "e-icon e-ribbon e-resitalic",
click: "executeAction"
}
},
{
id: "underline",
text: "Underline",
type: ej.Ribbon.Type.ToggleButton,
isMobileOnly: true,
toggleButtonSettings: {
contentType: ej.ContentType.ImageOnly,
defaultText: "Underline",
activeText: "Underline",
defaultPrefixIcon: "e-icon e-ribbon e-resunderline",
activePrefixIcon: "e-icon e-ribbon e-resunderline",
click: "executeAction"
}
},
{
id: "strikethrough",
text: "strikethrough",
isMobileOnly: true,
type: ej.Ribbon.Type.ToggleButton,
toggleButtonSettings: {
contentType: ej.ContentType.ImageOnly,
defaultText: "Strikethrough",
activeText: "Strikethrough",
defaultPrefixIcon: "e-icon e-ribbon strikethrough",
activePrefixIcon: "e-icon e-ribbon strikethrough",
click: "executeAction"
}
},
{
id: "superscript",
text: "superscript",
isMobileOnly: true,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-superscripticon",
click: "executeAction"
}
}
],
defaults: {
isBig: false
}
}, ]
},
]
},
],
create: "createControl",
});
});
</script>
<style>
.e-ribbon .e-Font:before {
font-family: 'ej-ribbonfont';
content: "\e90e";
top: 7px !important;
text-indent: -2px;
}
</style>tabs.groups.content.groups.buttonSettings Object
Specifies the Syncfusion button members, events by using this buttonSettings.
Default Value:
- Object
<ts ref = “ej.Button.Model” />
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig: true,
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 100,
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.columns number
It is used to set the count of gallery contents in a row.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li>
<a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li>
<a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.contentID string
Specifies the custom items such as div, table, controls as custom controls with the type “ej.Ribbon.Type.Custom” in the groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<input id="fontColor"/>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}, {
id: "fontColor",
text: "Font Color",
toolTip: "Font Color",
type: ej.Ribbon.Type.Custom,
contentID: "fontColor"
}]
}]
}]
}],
create: "createControl",
});
});
function createControl(args) {
$("#fontColor").ejColorPicker({
value: "#FFFF00",
modelType: "palette",
cssClass: "e-ribbon",
toolIcon: "e-icon e-fontcoloricon"
});
}
</script>tabs.groups.content.groups.cssClass string
Specifies the CSS class property to apply styles to the button, split, dropdown controls in the groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<style>
.e-cssclass {
margin-left: 20px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
cssClass:"e-cssclass",
isBig:true,
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 100,
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems Array
Specifies the Syncfusion button and menu as gallery extra items.
Default Value:
- Array
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.buttonSettings Object
Specifies the Syncfusion button members, events by using buttonSettings.
Default Value:
- Object
<ts ref = “ej.Button.Model” />
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.customItemType enum
Specifies the type as ej.Ribbon.CustomItemType.Menu or ej.Ribbon.CustomItemType.Button to render Syncfusion button and menu.
Default Value:
- ej.Ribbon.CustomItemType.Button
| Name | Description |
|---|---|
| Button | Specifies the button type in customGalleryItems |
| Menu | Specifies the menu type in customGalleryItems |
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.customToolTip Object
Specifies the custom tooltip for gallery extra item’s button. Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.
Default Value:
- Object
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.menuId string
Specifies the UL list id to render menu as gallery extra item.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.menuSettings Object
Specifies the Syncfusion menu members, events by using menuSettings.
Default Value:
- Object
<ts ref = “ej.Menu.Model” />
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.text string
Specifies the text for gallery extra item’s button.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customGalleryItems.toolTip string
Specifies the tooltip for gallery extra item’s button.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customToolTip Object
Provides custom tooltip for button, split button, dropdown list, toggle button, custom controls in the sub groups. Text and HTML support are also provided for title and content.
Default Value:
- Object
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Expand",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "expand",
text: "Expand Button",
customToolTip: {
title: "<i&gtExpand</i>",
content: "<h5&gtExpand content</h5>",
prefixIcon: "e-expander",
}
}, {
id: "new",
text: "New Button",
customToolTip: {
title: "New",
content: "New content"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customToolTip.content string
Sets content to the custom tooltip. Text and HTML support are provided for content.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Expand",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "expand",
text: "Expand Button",
customToolTip: {
title: "<i&gtExpand</i>",
content: "<h5&gtExpand content</h5>",
prefixIcon: "e-expander",
}
}, {
id: "new",
text: "New Button",
customToolTip: {
title: "New",
content: "New content"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customToolTip.prefixIcon string
Sets icon to the custom tooltip content.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Expand",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "expand",
text: "Expand Button",
customToolTip: {
title: "<i>Expand</i>",
content: "<h5>Expand content</h5>",
prefixIcon: "e-expander",
}
}, {
id: "new",
text: "New Button",
customToolTip: {
title: "New",
content: "New content"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.customToolTip.title string
Sets title to the custom tooltip. Text and HTML support are provided for title and the title is in bold for text format.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Expand",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "expand",
text: "Expand Button",
customToolTip: {
title: "<i>Expand</i>",
content: "<h5>Expand content</h5>",
prefixIcon: "e-expander",
}
}, {
id: "new",
text: "New Button",
customToolTip: {
title: "New",
content: "New content"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.dropdownSettings Object
Specifies the Syncfusion dropdown list members, events by using this dropdownSettings.
Default Value:
- Object
<ts ref = “ej.DropDownList.Model” />
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<style>
.e-cssclass {
margin-left: 20px;
}
</style>
<script type="text/javascript">
var fontFamily = ["Segoe UI", "Arial", "Times New Roman", "Tahoma", "Helvetica"];
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "fontFamily",
toolTip: "Font",
type: ej.Ribbon.Type.DropDownList,
dropdownSettings: {
dataSource: fontFamily,
value: "Segoe UI",
width: 150
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.enableSeparator boolean
Specifies the separator to the control that is in row type group. The separator separates the control from the next control in the group. Set “true” to enable the separator.
Default Value:
- false
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
enableSeparator: true,
buttonSettings: {
width: 100,
}
},
{
id: "font",
text: "Font",
toolTip: "Font",
buttonSettings: {
width: 150,
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70
}
}]
}]
}]
});
});
</script>tabs.groups.content.groups.expandedColumns number
Sets the count of gallery contents in a row, when the gallery is in expanded state.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.galleryItems Array
Defines each gallery content.
Default Value:
- Array
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.galleryItems.buttonSettings Object
Specifies the Syncfusion button members, events by using buttonSettings.
Default Value:
- Object
<ts ref = “ej.Button.Model” />
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
.e-gallerycontent1{
font-style: italic;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1",
buttonSettings: {
cssClass: "e-gallerycontent1"
}
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.galleryItems.customToolTip Object
Specifies the custom tooltip for gallery content. Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.
Default Value:
- Object
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
customToolTip: {
title: "<u>GalleryContent</u>",
content: "<b>GalleryContent 1</b>",
prefixIcon: "e-expander",
}
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.galleryItems.text string
Sets text for the gallery content.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.galleryItems.toolTip string
Sets tooltip for the gallery content.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.id string
Specifies the Id for button, split button, dropdown list, toggle button, gallery, custom controls in the sub groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.isBig boolean
Specifies the size for button, split button controls. Set “true” for big size and “false” for small size.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig:true,
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 100
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.itemHeight string|number
Sets the height of each gallery content.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.itemWidth string|number
Sets the width of each gallery content.
Default Value:
- null
Example
<style>
.e-extracontent .e-extrabtnstyle{
padding-left: 28px;
text-align: left;
}
</style>
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="customMenu">
<li><a>New Quick Step</a>
<ul>
<li><a>Move to new folder</a></li>
<li><a>Categorize & Move</a></li>
<li><a>Flag & Move</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.splitButtonSettings Object
Specifies the Syncfusion split button members, events by using this splitButtonSettings.
Default Value:
- Object
<ts ref = “ej.SplitButton.Model” />
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<ul id="split">
<li><span>Paste</span></li>
</ul>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig:true,
type: ej.Ribbon.Type.SplitButton,
splitButtonSettings: {
targetID: "split",
buttonMode: "dropdown",
arrowPosition:"bottom"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.text string
Specifies the text for button, split button, toggle button controls in the sub groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.toggleButtonSettings Object
Specifies the Syncfusion toggle button members, events by using toggleButtonSettings.
Default Value:
- Object
<ts ref = “ej.ToggleButton.Model” />
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "bold",
toolTip: "Bold",
isBig:true,
type: ej.Ribbon.Type.ToggleButton,
toggleButtonSettings: {
defaultText: "Bold",
activeText: "BoldTog"
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.toolTip string
Specifies the tooltip for button, split button, dropdown list, toggle button, custom controls in the sub groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.content.groups.quickAccessMode enum
To add,show and hide controls in Quick Access toolbar.
| Name | Description |
|---|---|
| None | Controls are hidden in Quick Access toolbar |
| ToolBar | Add controls in toolBar |
| Menu | Add controls in menu |
Default Value:
- ej.Ribbon.QuickAccessMode.None
Example
<ul id="ribbon">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "100%",
showQAT: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Font",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "bold",
text: "Bold",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon bold"
}
}, {
id: "italic",
text: "Italic",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonitalic"
}
}, {
id: "underline",
text: "Underline",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonunderline"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 30
}
}]
}]
}]
});
});
</script>tabs.groups.content.groups.type enum
Specifies the type as “ej.Ribbon.Type.Button” or “ej.Ribbon.Type.SplitButton” or “ej.Ribbon.Type.DropDownList” or “ej.Ribbon.Type.ToggleButton” or “ej.Ribbon.Type.Custom” or “ej.Ribbon.Type.Gallery” to render button, split, dropdown, toggle button, gallery, custom controls.
Default Value:
- ej.Ribbon.Type.Button
| Name | Description |
|---|---|
| Button | Specifies the button control |
| SplitButton | Specifies the split button |
| DropDownList | Specifies the dropDown |
| Custom | To append external element's |
| ToggleButton | Specifies the toggle button |
| Gallery | Specifies the ribbon gallery |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}]
});
});
</script>tabs.groups.contentID string
Specifies the ID of custom items to be placed in the groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.groups.customContent string
Specifies the HTML contents to place into the groups.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
type: "custom",
customContent: "<button id='customContent'>Custom Content</button>"
}]
}]
});
});
</script>tabs.groups.enableGroupExpander boolean
Specifies the group expander for groups in the ribbon control. Set “true” to enable the group expander.
Default Value:
- false
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
contentID: "btn"
}]
}]
});
});
</script>tabs.groups.groupExpanderSettings Object
Sets custom setting to the groups in the ribbon control.
Default Value:
- Object
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
groupExpanderSettings:{
toolTip: "Clipboard"
}
}]
}]
});
});
</script>tabs.groups.groupExpanderSettings.toolTip string
Sets tooltip for the group expander of the group.
Default Value:
- null
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
groupExpanderSettings:{
toolTip: "Clipboard"
}
}]
}]
});
});
</script>tabs.groups.groupExpanderSettings.customToolTip Object
Specifies the custom tooltip for group expander.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.
Default Value:
- Object
Example
div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
groupExpanderSettings:{
customToolTip:{
title: "Clipboard",
content: "<h6>Show a popup for the Clipboard group.</h6>"
}
}
}]
}]
});
});
</script>tabs.groups.text string
Specifies the text to the groups in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.groups.type string
Specifies the custom items such as div, table, controls by using the “custom” type.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.id string
Specifies the ID for each tab’s content panel.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>tabs.text string
Specifies the text of the tab in the ribbon control.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>locale string
Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region and it will need to use the user’s preference.
Default Value:
- “en-US”
Example
<div id="defaultRibbon"></div>
<ul id="ribbon">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
</ul>
</li>
</ul>
<script>
ej.Ribbon.Locale["es-ES"] = {
CustomizeQuickAccess: "Agordu Rapida Aliro",
MoreCommands: "pli Komando"
};
$(function() {
$("#defaultRibbon").ejRibbon({
width: "100%",
locale: "es-ES",
showQAT: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Clipboard",
alignType: ej.Ribbon.alignType.columns,
content: [{
groups: [{
id: "paste",
text: "paste",
toolTip: "Paste",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
splitButtonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonpaste",
targetID: "pasteSplit",
buttonMode: "dropdown",
arrowPosition: ej.ArrowPosition.Bottom,
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.SplitButton,
width: 50,
height: 70
}
}]
}]
}]
});
});
</script>width string|number
Specifies the width to the ribbon control. You can set width in string or number format.
Default Value:
- null
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
</script>Methods
addContextualTabs(contextualTabSet, [index])
Adds contextual tab or contextual tab set dynamically in the ribbon control with contextual tabs object and index position. When index is null, ribbon contextual tab or contextual tab set is added at the last index.
| Name | Type | Description |
|---|---|---|
| contextualTabSet | object | contextual tab or contextual tab set object. |
| index | number | index of the contextual tab or contextual tab set, this is optional. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<div id="design">ContextualTab</div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
var cTab = {
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style",
type: "custom",
contentID: "design"
}]
}]
}
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Add new contextual tab or contextual tab set with given list
ribbonObj.addContextualTabs(cTab, 2);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<div id="design">ContextualTab</div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
var cTab = {
backgroundColor: "#FCFBEB",
borderColor: "#F2CC1C",
tabs: [{
id: "Design",
text: "DESIGN",
groups: [{
text: "Table Style",
type: "custom",
contentID: "design"
}]
}]
}
$("#Ribbon").ejRibbon("addContextualTabs", cTab, 2);
</script>addBackStageItem(item,[index])
Add new option to Backstage page.
| Name | Type | Description |
|---|---|---|
| item | object | select the object to add the backstage item |
| index | number | index to the backstage item this is optional. |
Example
<div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var addBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Add backstage items to the ribbon
ribbonObj.addBackStageItem(addBackStage, 1);
</script><div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var addBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
$("#Ribbon").ejRibbon("addBackStageItem",addBackStage, 1);
</script>addTab(tabText, ribbonGroups, [index])
Adds tab dynamically in the ribbon control with given name, tab group array and index position. When index is null, ribbon tab is added at the last index.
| Name | Type | Description |
|---|---|---|
| tabText | string | ribbon tab display text. |
| ribbonGroups | array | groups to be displayed in ribbon tab . |
| index | number | index of the ribbon tab,this is optional. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
var tabGroup = [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}];
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Add new ribbon tab with given list
ribbonObj.addTab("Tab2", tabGroup, 2);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
var tabGroup = [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}];
$("#Ribbon").ejRibbon("addTab", "Tab2", tabGroup, 2);
</script>addTabGroup(tabIndex, tabGroup, [groupIndex])
Adds tab group dynamically in the ribbon control with given tab index, tab group object and group index position. When group index is null, ribbon group is added at the last index.
| Name | Type | Description |
|---|---|---|
| tabIndex | number | ribbon tab index. |
| tabGroup | object | group to be displayed in ribbon tab . |
| groupIndex | number | index of the ribbon group,this is optional. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var ribbonGroup = {
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
};
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Add new ribbon group with given list
ribbonObj.addTabGroup(1, ribbonGroup, 0);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var ribbonGroup = {
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "new",
text: "New"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
};
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
$("#Ribbon").ejRibbon("addTabGroup", 1, ribbonGroup, 0);
$("#Ribbon").ejRibbon("addTab", "Tab2", tabGroup, 2);
</script>addTabGroupContent(tabIndex, groupIndex, content, [contentIndex], [subGroupIndex])
Adds group content dynamically in the ribbon control with given tab index, group index, content, content index and sub group index position. When content index is null, content is added at the last index.
| Name | Type | Description |
|---|---|---|
| tabIndex | number | ribbon tab index. |
| groupIndex | number | ribbon group index. |
| content | object | content to be displayed in the ribbon group. |
| contentIndex | number | ribbon content index. This is optional. If the value is not given, then by default contentIndex will be considered as 0. |
| subGroupIndex | number | sub group index in the ribbon group. This is optional. If the value is not given, then by default contentIndex will be considered as 0. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var content = {
id: "new",
text: "new",
};
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Add new ribbon content with given list
ribbonObj.addTabGroupContent(1, 0, content, 0, 0);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "One", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "one",
text: "one"
},{
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var content= {
id: "new",
text: "new",
};
//initialize the Ribbon object
$("#Ribbon").ejRibbon("addTabGroupContent",1,0,content,0,0);
</script>hideBackstage()
Hides the ribbon backstage page.
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// hide the ribbon backstage page.
ribbonObj.hideBackstage();
</script><div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("hideBackstage");
</script>collapse()
Collapses the ribbon tab content.
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// collapse the ribbon control.
ribbonObj.collapse();
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("collapse");
</script>destroy()
Destroys the ribbon widget. All the events bound using this._on are unbound automatically and the ribbon control is moved to pre-init state.
Example
<script>
var ribbonObj = $("#Ribbon").data("ejRibbon");
ribbonObj.destroy(); // destroy the ribbon
</script><script>
// destroy the ribbon
$("#Ribbon").ejRibbon("destroy");
</script>expand()
Expands the ribbon tab content.
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// expand the ribbon control.
ribbonObj.collapse();
ribbonObj.expand();
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("collapse");
$("#Ribbon").ejRibbon("expand");
</script>getTabText(index)
Gets text of the given index tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| index | number | index of the tab item. |
Returns:
string
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// To get text of the given index tab in the ribbon control.
ribbonObj.getTabText(1);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("getTabText", 1);
</script>hideTab(text)
Hides the given text tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// hide the given text tab item in the ribbon control.
ribbonObj.hideTab("HOME");
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("hideTab", "HOME");
</script>isEnable(text)
Checks whether the given text tab in the ribbon control is enabled or not.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Returns:
boolean
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// To check given text tab in the ribbon control is enabled or not.
ribbonObj.isEnable("HOME");
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("isEnable", "HOME");
</script>isVisible(text)
Checks whether the given text tab in the ribbon control is visible or not.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Returns:
boolean
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// To check given text tab in the ribbon control is visible or not.
ribbonObj.isVisible("HOME");
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("isVisible", "HOME");
</script>removeTab(index)
Removes the given index tab item from the ribbon control.
| Name | Type | Description |
|---|---|---|
| index | number | index of tab item. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Remove the given index tab item from the ribbon control.
ribbonObj.removeTab(1);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("removeTab", 1);
</script>setTabText(tabText, newText)
Sets new text to the given text tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| tabText | string | current text of the tab item. |
| newText | string | new text of the tab item. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// Set new text to the given text tab in the ribbon control.
ribbonObj.setTabText("HOME", "NEW");
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("setTabText", "HOME", "NEW");
</script>showBackstage()
Displays the ribbon backstage page.
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// show the ribbon backstage page.
ribbonObj.showBackstage();
</script><div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("showBackstage");
</script>showTab(text)
Displays the given text tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
//initialize the ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// hide the given text tab item in the ribbon control.
ribbonObj.showTab("HOME");
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
});
});
$("#Ribbon").ejRibbon("showTab", "HOME");
</script>updateGroup(tabIndex, groupId, [contentGroup])
To customize Group alone in the inside content.
| Name | Type | Description |
|---|---|---|
| tabIndex | number | ribbon tab index. |
| groupId | string | group id to be displayed in ribbon tab . |
| contentGroup | object | contentGroup is used in the object |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var ribbonGroup =
{
text: "new one "
};
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
ribbonObj.updateGroup(1, one, ribbonGroup);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
var ribbonGroup =
{
text: "new one "
};
$("#Ribbon").ejRibbon("updateGroup",1, "one", ribbonGroup);
</script>updateBackStageItem(index,[item])
Update option in existing Backstage.
| Name | Type | Description |
|---|---|---|
| index | number | index to the backstage item |
| item | object | select the object to add the backstage item |
Example
<div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var updateBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
$("#Ribbon").ejRibbon("updateBackStageItem",1,updateBackStage);
</script><div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var updateBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
ribbonObj.updateBackStageItem(1,updateBackStage);
</script>removeTabGroupContent(tabIndex, groupText, [contentIndex], [subGroupIndex])
To customize whole content from Tab Group.
| Name | Type | Description |
|---|---|---|
| tabIndex | number | ribbon tab index. |
| groupText | string | ribbon group text. |
| contentIndex | number | ribbon content index. This is optional. If the value is not given, all content groups will be removed. |
| subGroupIndex | number | sub group index in the ribbon group. This is optional. If the value is not given, all content groups will be removed. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
$("#Ribbon").ejRibbon("removeTabGroupContent",1,"One",0,1);
</script><ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<div id="Ribbon"></div>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "700px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "One",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "one",
text: "one"
}, {
id: "two",
text: "two"
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 70
}
}]
}]
}]
});
});
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// remove tab group content in the ribbon
ribbonObj.removeTabGroupContent(1, "One", 0, 1);
</script>removeBackStageItem(index)
Remove option from Backstage.
| Name | Type | Description |
|---|---|---|
| index | number | index to the backstage item |
Example
<div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var removeBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
//initialize the Ribbon object
var ribbonObj = $("#Ribbon").data("ejRibbon");
// remove backstage item in the ribbon
ribbonObj.removeBackStageItem(1);
</script><div id="content1">
<ul style="list-style: none">
<div style="margin-left: 30px; font-size: 20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function () {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "open",
text: "Open",
contentID: "content1"
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
});
});
var removeBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
$("#Ribbon").ejRibbon("removeBackStageItem",1);
</script>Events
beforeTabRemove
Triggered before the ribbon tab item is removed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
beforeTabRemove: function(args) {}
});
});
</script>create
Triggered before the ribbon control is created.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from Ribbon.
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
create: function(args) {}
});
});
</script>destroy
Triggered before the ribbon control is destroyed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
destroy: function(args) {}
});
});
</script>groupClick
Triggered when the control in the group is clicked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
| target | number | returns the control clicked in the group. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
groupClick: function(args) {}
});
});
</script>groupExpand
Triggered when the group expander in the group is clicked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
| target | number | returns the clicked group expander. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
groupExpand: function(args) {}
});
});
</script>galleryItemClick
Triggered when an item in the Gallery control is clicked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| galleryModel | object | returns the gallery model. |
| type | string | returns the name of the event. |
| target | number | returns the item clicked in the gallery. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Gallery",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "Gallery",
columns: 3,
itemHeight: 65,
itemWidth: 68,
expandedColumns: 4,
type: ej.Ribbon.type.gallery,
galleryItems: [{
text: "Content1",
toolTip: "GalleryContent1"
}, {
text: "Content2",
toolTip: "GalleryContent2"
}, {
text: "Content3",
toolTip: "GalleryContent3"
}, {
text: "Content4",
toolTip: "GalleryContent4"
}, {
text: "Content5",
toolTip: "GalleryContent5"
}, {
text: "Content6",
toolTip: "GalleryContent6"
}],
customGalleryItems: [{
customItemType: ej.Ribbon.customItemType.menu,
menuId: "customMenu",
menuSettings: {
openOnClick: false
}
}, {
text: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}]
}]
}]
}],
galleryItemClick: function(args) {}
});
});
</script>backstageItemClick
Triggered when a tab or button in the backstage page is clicked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
| target | number | returns the item clicked in the gallery. |
| id | string | returns the id of the target item. |
| text | string | returns the text of the target item. |
Example
<div id="content1">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
<li>Protect Workbook</li>
<li>Inspect Workbook</li>
<li>Versions</li>
<li>Browser View Options</li>
</ul>
</div>
<div id="content2">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
<li>Recent Workbooks</li>
<li>Computer</li>
</ul>
</div>
<div id="content3">
<ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
<li>Create PDF/XPS Document</li>
<li>Change File Type</li>
</ul>
</div>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "500px",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Backstage,
backstageSettings: {
text: "FILE",
height: 250,
width: 600,
headerWidth: 125,
pages: [{
id: "info",
text: "Info",
itemType: ej.Ribbon.itemType.tab,
contentID: "content1"
}, {
id: "open",
text: "Open",
contentID: "content2"
}, {
id: "export",
text: "Export",
contentID: "content3",
enableSeparator: true
}, {
id: "exit",
text: "Exit",
itemType: ej.Ribbon.itemType.button
}]
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
backstageItemClick : function (args) {}
});
});
</script>collapse
Triggered when the ribbon control is collapsed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
collapse: function(args) {}
});
});
</script>expand
Triggered when the ribbon control is expanded.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
expand: function(args) {}
});
});
</script>load
Triggered before the ribbon control is load.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
load: function(args) {}
});
});
</script>tabAdd
Triggered after adding the new ribbon tab item.
| Name | Type | Description | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
tabAdd: function(args) {}
});
});
</script>tabClick
Triggered when tab is clicked successfully in the ribbon control.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
tabClick: function(args) {}
});
});
</script>tabCreate
Triggered before the ribbon tab is created.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
tabCreate: function(args) {}
});
});
</script>tabRemove
Triggered after the tab item is removed from the ribbon control.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
tabRemove: function(args) {}
});
});
</script>tabSelect
Triggered after the ribbon tab item is selected in the ribbon control.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
tabSelect: function(args) {}
});
});
</script>toggleButtonClick
Triggered when the expand/collapse button is clicked successfully .
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Set to true when the event has to be canceled, else false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
| target | number | returns the expand/collapse button. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
// Set the width during initialization.
width: "100%",
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
toggleButtonClick: function(args) {}
});
});
</script>qatMenuItemClick
Triggered when the QAT menu item is clicked successfully .
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the ribbon model. |
| type | string | returns the name of the event. |
| text | string | returns the clicked menu item text. |
Example
<ul id="menu">
<li><a>FILE </a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save as</a></li>
<li><a>Print</a></li>
</ul></li></ul>
<div id="Ribbon"></div>
<button id="btn">Home button</button>
<script type="text/javascript">
$(function() {
$("#Ribbon").ejRibbon({
width: "100%",
showQAT: true,
applicationTab: {
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "ribbon",
menuSettings: {
openOnClick: false
}
},
tabs: [{
id: "home",
text: "HOME",
groups: [{
text: "Font",
alignType: ej.Ribbon.AlignType.Rows,
content: [{
groups: [{
id: "bold",
text: "Bold",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon bold"
}
}, {
id: "italic",
text: "Italic",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonitalic"
}
}, {
id: "underline",
text: "Underline",
quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
buttonSettings: {
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-ribbon e-ribbonunderline"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 30
}
}]
}]
}],
qatMenuItemClick: function(args) {}
});
});
</script>