ejRibbon
1 Nov 201724 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.
Example
<ej-ribbon id="Default" width="100%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu">
</ej-ribbon>
<ul id="ribbonmenu">
<li><a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>export class RibbonComponent {
constructor(public northwindService: NorthwindService) {}
}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
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [allowResizing]="allowResizing">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
allowResizing:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.allowResizing:true;
this.groups1 = [{
text: "Clipboard",
content: [{
groups: [{
id: "cut",
text: "Cut"
}, {
id: "copy",
text: "Copy"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Font",
content: [{
groups: [{
id: "bold",
text: "Bold"
}, {
id: "italic",
text: "Italic"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Align",
content: [{
groups: [{
id: "left",
text: " Left"
}, {
id: "right",
text: "Right"
}],
defaults: {
height: 70,
width: 40
}
}]
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [isResponsive]="isResponsive">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
isResponsive:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.isResponsive:true;
this.groups1 = [{
text: "Clipboard",
content: [{
groups: [{
id: "cut",
text: "Cut"
}, {
id: "copy",
text: "Copy"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Font",
content: [{
groups: [{
id: "bold",
text: "Bold"
}, {
id: "italic",
text: "Italic"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Align",
content: [{
groups: [{
id: "left",
text: " Left"
}, {
id: "right",
text: "Right"
}],
defaults: {
height: 70,
width: 40
}
}]
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [buttonDefaults]="buttonDefaults">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
buttonDefaults:Object;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.buttonDefaults={
width: 50,
height: 40,
showRoundedCorner: true
};
this.groups1 = [{
text: "Clipboard",
content: [{
groups: [{
id: "cut",
text: "Cut"
}, {
id: "copy",
text: "Copy"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Font",
content: [{
groups: [{
id: "bold",
text: "Bold"
}, {
id: "italic",
text: "Italic"
}],
defaults: {
height: 70,
width: 40
}
}]
}, {
text: "Align",
content: [{
groups: [{
id: "left",
text: " Left"
}, {
id: "right",
text: "Right"
}],
defaults: {
height: 70,
width: 40
}
}]
}]
}showQAT boolean
Property to enable the ribbon quick access toolbar.
Default Value:
- false
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [showQAT]="showQAT">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
showQAT:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.showQAT = true;
this.groups1 = [{
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
}
}]
}]
}]
}cssClass string
Sets the root CSS class for Ribbon which allow us to customize the appearance.
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [cssClass]="cssClass" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
cssClass:string;
buttonDefaults:Object;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.cssClass: "customCss";
this.buttonDefaults: {
width: 50,
height: 40,
showRoundedCorner: true
};
this.groups1 = [{
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
}
}]
}]
}]
}]
}collapsePinSettings Object
Sets custom setting to the collapsible pin in the ribbon.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [collapsePinSettings]="collapsePinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
collapsePinSettings:Object;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.collapsePinSettings: {
toolTip: "Pin the Ribbon"
};
this.groups1 = [{
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
}
}]
}]
}]
}collapsePinSettings.toolTip string
Sets tooltip for the collapse pin .
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [collapsePinSettings]="collapsePinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
collapsePinSettings:Object;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.collapsePinSettings: {
toolTip: "Pin the Ribbon"
};
this.groups1 = [{
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
}
}]
}]
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [collapsePinSettings]="collapsePinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
collapsePinSettings:Object;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.collapsePinSettings:{
customToolTip:{
title: "Pin the Ribbon",
content: "<h6>Keep it open while you work</h6>"
}
};
this.groups1 = [{
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
}
}]
}]
}]
}enableOnDemand boolean
Set enableOnDemand as true to load ribbon tab and backstage contents while corresponding item clicked.
Default Value:
- false
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [enableOnDemand]="enableOnDemand" [collapsePinSettings]="collapsePinSettings" [expandPinSettings]="expandPinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
collapsePinSettings:Object;
expandPinSettings:Object;
enableOnDemand:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.expandPinSettings: {
toolTip: "Collapse the Ribbon"
};
this.collapsePinSettings: {
toolTip: "Pin the Ribbon"
};
this.enableOnDemand: true,
this.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 }
]
}
};
this.groups1 = [{
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
}
}]
}]
}]
}collapsible boolean
Set collapsible property as true to render ribbon in initially collapsed state.
Default Value:
- false
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [collapsible]='collapsible' [enableOnDemand]="enableOnDemand" [collapsePinSettings]="collapsePinSettings" [expandPinSettings]="expandPinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
collapsePinSettings:Object;
expandPinSettings:Object;
collapsible:boolean;
enableOnDemand:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.expandPinSettings: {
toolTip: "Collapse the Ribbon"
};
this.collapsePinSettings: {
toolTip: "Pin the Ribbon"
};
this.collapsible:true;
this.enableOnDemand: true,
this.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 }
]
}
};
this.groups1 = [{
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
}
}]
}]
}]
}enableRTL boolean
Align content in the ribbon control from right to left by setting the property as true.
Default Value:
- false
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [enableRTL]='enableRTL'>
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
enableRTL:boolean;
groups1:any;
constructor(public northwindService: NorthwindService) {}
enableRTL:true;
this.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 }
]
}
};
this.groups1 = [{
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
}
}]
},
]
},
]
}expandPinSettings Object
Sets custom setting to the expandable pin in the ribbon.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [expandPinSettings]="expandPinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
expandPinSettings:Object,
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.expandPinSettings: {
toolTip: "Collapse the Ribbon"
},
this.groups1 = [{
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
}
}]
}]
}]
}expandPinSettings.toolTip string
Sets tooltip for the expand pin.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [expandPinSettings]="expandPinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
expandPinSettings:Object,
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.expandPinSettings: {
toolTip: "Collapse the Ribbon"
},
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" [expandPinSettings]="expandPinSettings" >
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
expandPinSettings:Object,
groups1:any;
constructor(public northwindService: NorthwindService) {}
expandPinSettings: {
customToolTip:{
title: "Collapse the Ribbon",
content: "<h6>Click the icon to collapse the Ribbon.</h6>"
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab Object
Specifies the application tab to contain application menu or backstage page in the ribbon control.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.expandPinSettings: {
customToolTip:{
title: "Collapse the Ribbon",
content: "<h6>Click the icon to collapse the Ribbon.</h6>"
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings Object
Specifies the ribbon backstage page items.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.text string
Specifies the display text of application tab.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.height string|number
Specifies the height of ribbon backstage page.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.width string|number
Specifies the width of ribbon backstage page.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.pages Array
Specifies the ribbon backstage page with its tab and button elements.
Default Value:
- Array
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.pages.id string
Specifies the id for ribbon backstage page’s tab and button elements.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.pages.text string
Specifies the text for ribbon backstage page’s tab header and button elements.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.pages.enableSeparator boolean
Specifies the separator between backstage page’s tab and button elements.
Default Value:
- false
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.backstageSettings.headerWidth string|number
Specifies the width of backstage page header that contains tabs and buttons.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab="applicationTab" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.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
}]
}
},
this.groups1 = [{
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
}
}],
}],
}]
}applicationTab.menuItemID string
Specifies the ID of ul list to create application menu in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
constructor(public northwindService: NorthwindService) {}
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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
}
}],
}],
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [contextualTabs]='contextualTabs' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
contextualTabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}]
}]
}contextualTabs.backgroundColor string
Specifies the backgroundColor of the contextual tabs and tab set in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [contextualTabs]='contextualTabs' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
contextualTabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}]
}]
}contextualTabs.borderColor string
Specifies the borderColor of the contextual tabs and tab set in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [contextualTabs]='contextualTabs' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
contextualTabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}]
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [contextualTabs]='contextualTabs' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
contextualTabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}]
}]
}disabledItemIndex Array
Specifies the index or indexes to disable the given index tab or indexes tabs in the ribbon control.
Default Value:
- 0
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [disabledItemIndex]='disabledItemIndex' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
disabledItemIndex: number[],
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.disabledItemIndex:[1,2],
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}],
}enabledItemIndex Array
Specifies the index or indexes to enable the given index tab or indexes tabs in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [enabledItemIndex]='enabledItemIndex' [disabledItemIndex]='disabledItemIndex' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
disabledItemIndex: number[],
enabledItemIndex:number[],
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.disabledItemIndex:[1,2],
this.enabledItemIndex:[1],
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}],
}selectedItemIndex number
Specifies the index of the ribbon tab to select the given index tab item in the ribbon control.
Default Value:
- 1
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' [selectedItemIndex]='selectedItemIndex' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [groups]="groups1">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
groups1:any;
selectedItemIndex:number;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.selectedItemIndex:2,
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.groups1 = [{
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"
}]
}],
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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"
}]
}],
}tabs.groups Array
Specifies single group or multiple groups and its contents to each tab in the ribbon control.
Default Value:
- Array
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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"
}]
}],
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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"
}]
}],
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}]
}]
}]
}
}tabs.groups.content.defaults Object
Specifies the height, width, type, isBig property to the controls in the group commonly.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 70
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 70
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
height: 70,
width: 70,
isBig: true
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
allowResizing:boolean;
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.allowResizing: true,
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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
}
}, ]
},
]
},
]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
columns: 3,
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
}]
}]
}
}tabs.groups.content.groups.columns number
It is used to set the count of gallery contents in a row.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
columns: 3,
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
columns: 3,
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"
}
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
columns: 3,
toolTip: "New",
cssClass:"e-cssclass",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
},
}],
}]
}]
}
}tabs.groups.content.groups.customGalleryItems Array
Specifies the Syncfusion button and menu as gallery extra items.
Default Value:
- Array
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
},
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}],
}]
}]
}
}tabs.groups.content.groups.customGalleryItems.menuId string
Specifies the UL list id to render menu as gallery extra item.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
},
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
},
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}],
}]
}]
}
}tabs.groups.content.groups.customGalleryItems.text string
Specifies the text for gallery extra item’s button.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
},
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}],
}]
}]
}
}tabs.groups.content.groups.customGalleryItems.toolTip string
Specifies the tooltip for gallery extra item’s button.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
},
customToolTip: {
title: "<u>Save</u>",
content: "<i>Save Selection as new quick style</i>",
prefixIcon: "e-expander",
},
}, {
text: "Save Selection as new quick style",
toolTip: "Save Selection as new quick style",
customItemType: ej.Ribbon.customItemType.button,
buttonSettings: {
cssClass: "e-extrabtnstyle"
}
}]
}],
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}tabs.groups.content.groups.customToolTip.prefixIcon string
Sets icon to the custom tooltip content.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "fontFamily",
toolTip: "Font",
type: ej.Ribbon.Type.DropDownList,
dropdownSettings: {
dataSource: fontFamily,
value: "Segoe UI",
width: 150
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
}
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}tabs.groups.content.groups.galleryItems Array
Defines each gallery content.
Default Value:
- Array
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}tabs.groups.content.groups.galleryItems.text string
Sets text for the gallery content.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}tabs.groups.content.groups.galleryItems.toolTip string
Sets tooltip for the gallery content.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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"
}
}]
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig:true,
type: ej.Ribbon.Type.Button,
buttonSettings: {
width: 160,
height: 50
}
}],
}]
}
}tabs.groups.content.groups.itemHeight string|number
Sets the height of each gallery content.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
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"
}
}]
}]
}]
}
}tabs.groups.content.groups.itemWidth string|number
Sets the width of each gallery content.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
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"
}
}]
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig:true,
type: ej.Ribbon.Type.SplitButton,
splitButtonSettings: {
targetID: "split",
buttonMode: "dropdown",
arrowPosition:"bottom"
}
}]
}]
}]
}
}tabs.groups.content.groups.text string
Specifies the text for button, split button, toggle button controls in the sub groups.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isBig:true,
type: ej.Ribbon.Type.SplitButton,
splitButtonSettings: {
targetID: "split",
buttonMode: "dropdown",
arrowPosition:"bottom"
}
}]
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "bold",
toolTip: "Bold",
isBig:true,
type: ej.Ribbon.Type.ToggleButton,
toggleButtonSettings: {
defaultText: "Bold",
activeText: "BoldTog"
}
}]
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "bold",
toolTip: "Bold",
isBig:true,
type: ej.Ribbon.Type.ToggleButton,
toggleButtonSettings: {
defaultText: "Bold",
activeText: "BoldTog"
}
}]
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
showQAT:boolean;
constructor(public northwindService: NorthwindService) {}
this.showQAT:true,
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
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
}
}]
}]
}
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
content: [{
groups: [{
id: "bold",
toolTip: "Bold",
isBig:true,
type: ej.Ribbon.Type.ToggleButton,
toggleButtonSettings: {
defaultText: "Bold",
activeText: "BoldTog"
}
}]
}]
}]
}
}tabs.groups.contentID string
Specifies the ID of custom items to be placed in the groups.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn",
}]
}
}tabs.groups.customContent string
Specifies the HTML contents to place into the groups.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
type: "custom",
customContent: "<button id='customContent'>Custom Content</button>"
}]
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
contentID: "btn"
}]
}]
}tabs.groups.groupExpanderSettings Object
Sets custom setting to the groups in the ribbon control.
Default Value:
- Object
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
groupExpanderSettings:{
toolTip: "Clipboard"
}
}]
}]
}tabs.groups.groupExpanderSettings.toolTip string
Sets tooltip for the group expander of the group.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
enableGroupExpander: true,
groupExpanderSettings:{
toolTip: "Clipboard"
}
}]
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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>"
}
}
}]
}]
}tabs.groups.text string
Specifies the text to the groups in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
}]
}]
}tabs.groups.type string
Specifies the custom items such as div, table, controls by using the “custom” type.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
}]
}]
}tabs.id string
Specifies the ID for each tab’s content panel.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
}]
}]
}tabs.text string
Specifies the text of the tab in the ribbon control.
Default Value:
- null
Example
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
}]
}]
}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
<ej-ribbon id="Default" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
locale: string;
showQAT: boolean;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
locale: "es-ES",
showQAT: true,
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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
}
}]
}]
}]
}width string|number
Specifies the width to the ribbon control. You can set width in string or number format.
Default Value:
- null
Example
export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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
}
}]
}]
}]
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
this.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);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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.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
}]
}
},
this.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);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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("1","Tab2", tabGroup, 2);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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);hideBackstage()
Hides the ribbon backstage page.
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
},
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
}]
}
} ,
this.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();
}collapse()
Collapses the ribbon tab content.
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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();
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups: [{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}]
var ribbonObj = $("#Ribbon").data("ejRibbon");
ribbonObj.destroy(); // destroy the ribbon
}expand()
Expands the ribbon tab content.
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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();
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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);
}hideTab(text)
Hides the given text tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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");
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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");
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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");
}removeTab(index)
Removes the given index tab item from the ribbon control.
| Name | Type | Description |
|---|---|---|
| index | number | index of tab item. |
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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");
}showBackstage()
Displays the ribbon backstage page.
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
},
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
}]
}
} ,
this.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();
}showTab(text)
Displays the given text tab in the ribbon control.
| Name | Type | Description |
|---|---|---|
| text | string | text of the tab item. |
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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");
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
},
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
}]
}
} ,
this.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);
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.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 updateBackStage =
{
id: "File",
text: "File",
itemType: ej.Ribbon.ItemType.Tab
}
$("#Ribbon").ejRibbon("removeTabGroupContent",1,"One",0,1);
}removeBackStageItem(index)
Remove option from Backstage.
| Name | Type | Description |
|---|---|---|
| index | number | index to the backstage item |
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
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
}]
}
} ,
this.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);
}Events
beforeTabRemove
Triggered before the ribbon tab item is removed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (beforeTabRemove)="onBeforeTabRemove($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onBeforeTabRemove(e: any){
// Your code here
}
}create
Triggered before the ribbon control is created.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from Ribbon.
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (create)="onCreate($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onCreate(e: any){
// Your code here
}
}destroy
Triggered before the ribbon control is destroyed.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (destroy)="onDestroy($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onDestroy(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (groupClick)="onGroupClick($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onGroupClick(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (groupExpand)="onGroupExpand($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onGroupExpand(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (galleryItemClick)="onGalleryItemClick($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu
} ,
this.tabs = [{
id: "home",
text: "HOME",
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"
}
}]
}]
}],
this.onGalleryItemClick(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (backstageItemClick)="onBackstageItemClick($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
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
}]
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
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"
}
}]
}]
}],
this.onBackstageItemClick(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (collapse)="onCollapse($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onCollapse(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (expand)="onExpand($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onExpand(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (load)="onLoad($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onLoad(e: any){
// Your code here
}
}tabAdd
Triggered after adding the new ribbon tab item.
| Name | Type | Description | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (tabAdd)="onTabAdd($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onTabAdd(e: any){
// Your code here
}
}tabClick
Triggered when tab is clicked successfully in the ribbon control.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (tabClick)="onTabAdd($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onTabClick(e: any){
// Your code here
}
}tabCreate
Triggered before the ribbon tab is created.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button.
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (tabCreate)="onTaCreate($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onTabCreate(e: any){
// Your code here
}
}tabRemove
Triggered after the tab item is removed from the ribbon control.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (tabRemove)="onTabRemove($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onTabRemove(e: any){
// Your code here
}
}tabSelect
Triggered after the ribbon tab item is selected in the ribbon control.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters from button
|
Example
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (tabSelect)="onTabSelect($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onTabSelect(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (toggleButtonClick)="onToggleButtonClick($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onToggleButtonClick(e: any){
// Your code here
}
}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
<ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicationTab.menuItemID="ribbonmenu" (qatMenuItemClick)="onQatMenuItemClick($event)">
<e-tabs>
<e-tab id="home" text="HOME" [tabs]="tabs">
</e-tab>
</e-tabs>
</ej-ribbon>
<ul id="ribbonmenu">
<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>export class RibbonComponent {
tabs:any;
width: string;
applicationTab:Object;
constructor(public northwindService: NorthwindService) {}
this.width: "100%",
this.applicationTab:{
type: ej.Ribbon.ApplicationTabType.Menu,
menuItemID: "menu",
menuSettings: {
openOnClick: false
}
} ,
this.tabs = [{
id: "home",
text: "HOME",
groups:[{
text: "New",
alignType: ej.Ribbon.AlignType.Rows,
type: "custom",
contentID: "btn"
}]
}],
this.onQatMenuItemClick(e: any){
// Your code here
}
}