ejRibbon

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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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&amp;gtExpand</i>",
                                 content: "<h5&amp;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

  • html
  • <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>
  • ts
  • 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&amp;gtExpand</i>",
                                 content: "<h5&amp;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

  • html
  • <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>
  • ts
  • 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&amp;gtExpand</i>",
                                 content: "<h5&amp;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

  • html
  • <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>
  • ts
  • 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&amp;gtExpand</i>",
                                 content: "<h5&amp;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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <ej-ribbon id="Ribbon" width="20%" [applicationTab]='applicationTab' applicat