ejRibbon

11 Jul 201824 minutes to read

The ribbon can be easily configured to the DOM element, such as div. You can create a ribbon with a highly customizable look and feel.

Syntax

  • JAVASCRIPT
  • $(element).ejRibbon();

    Example

  • HTML
  • <div id="Ribbon"></div> 
        
        <script>
        // Create Ribbon
        $('#Ribbon').ejRibbon();         
        </script>

    Requires

    • module:jQuery
    • module:ej.core.js
    • module:ej.data.js
    • module:ej.globalize.min.js
    • module:ej.waitingpopup.min.js
    • module:ej.dropdownlist.js
    • module:ej.button.js
    • module:ej.tab.js
    • module:ej.splitbutton.js
    • module:ej.ribbon.js
    • module:ej.menu.js
    • module:ej.scroller.js
    • module:ej.checkbox.js
    • module:ej.togglebutton.js

    Members

    allowResizing boolean

    Enables the ribbon resize feature.allowResizing is a deprecated property of isResponsive.

    Default Value

    • false

    Example

  • HTML
  • <ul id="ribbon">
            <li>
                <a>FILE </a>
                <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
                </ul>
            </li>
         </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">   
           $(function() {
                $("#Ribbon").ejRibbon({
                    width: "100%",
                    allowResizing: true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "Clipboard",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "cut",
                                    text: "Cut"
                                }, {
                                    id: "copy",
                                    text: "Copy"
                                }, {
                                    id: "paste",
                                    text: "Paste"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }, {
                            text: "Font",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "bold",
                                    text: "Bold"
                                }, {
                                    id: "italic",
                                    text: "Italic"
                                }, {
                                    id: "underline",
                                    text: "Underline"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }, {
                            text: "Alignment",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "left",
                                    text: " Left"
                                }, {
                                    id: "center",
                                    text: "Center"
                                }, {
                                    id: "right",
                                    text: "Right"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }]
                    }]
                });
            });      
        </script>

    isResponsive boolean

    When set to true, adapts the Ribbon layout to fit the screen size of devices on which it renders.

    Default Value

    • false

    Example

  • HTML
  • <ul id="ribbon">
            <li>
                <a>FILE </a>
                <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
                </ul>
            </li>
         </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">   
           $(function() {
                $("#Ribbon").ejRibbon({
                    width: "100%",
                    isResponsive: true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "Clipboard",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "cut",
                                    text: "Cut"
                                }, {
                                    id: "copy",
                                    text: "Copy"
                                }, {
                                    id: "paste",
                                    text: "Paste"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }, {
                            text: "Font",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "bold",
                                    text: "Bold"
                                }, {
                                    id: "italic",
                                    text: "Italic"
                                }, {
                                    id: "underline",
                                    text: "Underline"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }, {
                            text: "Alignment",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "left",
                                    text: " Left"
                                }, {
                                    id: "center",
                                    text: "Center"
                                }, {
                                    id: "right",
                                    text: "Right"
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 70,
                                    width: 75
                                }
                            }]
                        }]
                    }]
                });
            });      
        </script>

    buttonDefaults Object

    Specifies the height, width, enableRTL, showRoundedCorner,enabled,cssClass property to the controls in the ribbon commonly and
    it will work only when those properties are not defined in buttonSettings and content defaults.

    Default Value:

    • Object

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script>
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "100%",
                buttonDefaults: {
                    width: 50,
                    height: 40,
                    showRoundedCorner: true
                },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                    width: 70,
                                    height: 50
                                }
                            }]
                        }]
                    }]
                }]
            });
        });
        </script>

    showQAT boolean

    Property to enable the ribbon quick access toolbar.

    Default Value:

    • false

    Example

  • HTML
  • <ul id="ribbon">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">   
            $(function () {
                $("#Ribbon").ejRibbon({
                    width: "100%",
                    showQAT: true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "Font",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "bold",
                                    text: "Bold",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon bold"
                                    }
                                }, {
                                    id: "italic",
                                    text: "Italic",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon e-ribbonitalic"
                                    }
                                }, {
                                    id: "underline",
                                    text: "Underline",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon e-ribbonunderline"
                                    }
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 30
                                }
                            }]
                        }]
                    }]
                });
            });
    </script>

    cssClass string

    Sets the root CSS class for Ribbon which allow us to customize the appearance.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script>
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "100%",
                cssClass: "customCss",
                buttonDefaults: {
                    width: 50,
                    height: 40,
                    showRoundedCorner: true
                },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                    width: 70,
                                    height: 50
                                }
                            }]
                        }]
                    }]
                }]
            });
        });
        </script>

    collapsePinSettings Object

    Sets custom setting to the collapsible pin in the ribbon.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="defaultRibbon"></div>
          <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
             </ul>
            <script>
                $(function() {
                $("#defaultRibbon").ejRibbon({
                    width: "100%",
                    collapsePinSettings: {
                        toolTip: "Pin the Ribbon"
                    },
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "New",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "new",
                                    text: "New",
                                    toolTip: "New",
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        imagePosition: ej.ImagePosition.ImageTop,
                                        prefixIcon: "e-ribbon e-new",
                                        click: "executeAction"
                                    }
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    width: 60,
                                    height: 70
                                }
                            }]
                        }]
                    }],
                });
            });
          </script>

    collapsePinSettings.toolTip string

    Sets tooltip for the collapse pin .

    Default Value:

    • null

    Example

  • HTML
  • <div id="defaultRibbon"></div>
         <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
         </ul>
         <script>
            $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                collapsePinSettings: {
                    toolTip: "Pin the Ribbon"
                },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }],
        
            });
        });
        </script>

    collapsePinSettings.customToolTip Object

    Specifies the custom tooltip for collapse pin.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="defaultRibbon"></div>
          <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
           </ul>
        <script>
        $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                collapsePinSettings:{
                            customToolTip:{
                            title: "Pin the Ribbon",
                            content: "<h6>Keep it open while you work</h6>"
                            }
                        },	
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }],
        
            });
        });
        </script>

    enableOnDemand boolean

    Set enableOnDemand as true to load ribbon tab and backstage contents while corresponding item clicked.

    Default Value:

    • false

    Example

  • HTML
  • <div id="defaultRibbon"></div>
                    <div id="infoCon" style="display:none">
                        <div style="display:table-cell;padding-top:10px">
                            <table>
                                <tr>
                                    <td style="vertical-align: top;padding-left:10px">
                                        <span class="e-bsptitle" style="font-size:18px">Protect Workbook</span>
                                        <span style="display:block">Control what types of changes people can make to this workbook.</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            $("#defaultRibbon").ejRibbon({
                                width: "100%",
                                expandPinSettings: {
                                    toolTip: "Collapse the Ribbon"
                                },
                                collapsePinSettings: {
                                    toolTip: "Pin the Ribbon"
                                },
                                enableOnDemand: true,
                                applicationTab: {
                                    type: ej.Ribbon.ApplicationTabType.Backstage,
                                    backstageSettings: {
                                        text: "FILE", height: 350, width: 1000, headerWidth: 120, pages: [
                                        { id: "info", text: "Info", contentID: "infoCon", itemType: ej.Ribbon.ItemType.Tab },
                                        { id: "close", text: "Close", itemType: ej.Ribbon.ItemType.Button }
                                        ]
                                    }
                                },
                                tabs: [{
                                    id: "home", text: "HOME", groups: [{
                                        text: "Clipboard", alignType: ej.Ribbon.AlignType.Columns, enableGroupExpander: true, groupExpanderSettings: {
                                            toolTip: "Clipboard"
                                        }, content: [{
                                            groups: [{
                                                id: "paste",
                                                text: "paste",
                                                buttonSettings: {
                                                    contentType: ej.ContentType.ImageOnly,
                                                    prefixIcon: "e-icon e-ribbon e-ribbonpaste"
                                                }
                                            }
                                            ],
                                            defaults: {
                                                type: ej.Ribbon.Type.Button,
                                                isBig: true,
                                                width: 50,
                                                height: 70
                                            }
                                        },
                                        {
                                            groups: [{
                                                id: "cut",
                                                text: "Cut",
                                                buttonSettings: {
                                                    contentType: ej.ContentType.TextAndImage,
                                                    prefixIcon: "e-icon e-ribbon e-ribboncut"
                                                }
                                            },
                                            {
                                                id: "copy",
                                                text: "Copy",
                                                buttonSettings: {
                                                    contentType: ej.ContentType.TextAndImage,
                                                    prefixIcon: "e-icon e-ribbon e-ribboncopy"
                                                }
                                            },
                                            {
                                                id: "clear",
                                                text: "Clear",
                                                toolTip: "Clear All",
                                                buttonSettings: {
                                                    contentType: ej.ContentType.TextAndImage,
                                                    prefixIcon: "e-icon e-ribbon clearAll"
                                                }
                                            }],
                                            defaults: {
                                                type: ej.Ribbon.Type.Button,
                                                width: 60,
                                                isBig: false
                                            }
                                        }]
                                    },
                                    ]
                                },
                                {
                                    id: "layout", text: "LAYOUT", groups: [
                                    {
                                        text: "Print Layout", alignType: ej.Ribbon.AlignType.Rows, content: [{
                                            groups: [{
                                                id: "printLayout",
                                                text: "Print Layout",
                                                buttonSettings: {
                                                    contentType: ej.ContentType.TextAndImage,
                                                    imagePosition: ej.ImagePosition.ImageTop,
                                                    prefixIcon: "e-icon e-ribbon e-printlayout"
                                                }
                                            }
                                            ],
                                            defaults: {
                                                type: ej.Ribbon.Type.Button,
                                                width: 80,
                                                height: 70
                                            }
                                        }]
                                    }]
                                }]
                            });
                        });
                    </script>

    collapsible boolean

    Set collapsible property as true to render ribbon in initially collapsed state.

    Default Value:

    • false

    Example

  • HTML
  • <div id="defaultRibbon"></div>
                <div id="infoCon" style="display:none">
                    <div style="display:table-cell;padding-top:10px">
                        <table>
                            <tr>                           
                                <td style="vertical-align: top;padding-left:10px">
                                    <span class="e-bsptitle" style="font-size:18px">Protect Workbook</span>
                                    <span style="display:block">Control what types of changes people can make to this workbook.</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <script type="text/javascript">
                $(function () {
                $("#defaultRibbon").ejRibbon({
                    width: "100%",
                    expandPinSettings: {
                        toolTip: "Collapse the Ribbon"
                    },
                    collapsePinSettings: {
                        toolTip: "Pin the Ribbon"
                    },
                    enableOnDemand: true,
                    collapsible:true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Backstage,
                        backstageSettings: {
                            text: "FILE", height: 350, width: 1000, headerWidth: 120, pages: [
                            { id: "info", text: "Info", contentID: "infoCon", itemType: ej.Ribbon.ItemType.Tab },
                            { id: "close", text: "Close", itemType: ej.Ribbon.ItemType.Button }
                            ]
                        }
                    },
                    tabs: [{
                        id: "home", text: "HOME", groups: [{
                            text: "Clipboard", alignType: ej.Ribbon.AlignType.Columns, enableGroupExpander: true, groupExpanderSettings: {
                                toolTip: "Clipboard"
                            }, content: [{
                                groups: [{
                                    id: "paste",
                                    text: "paste",
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-icon e-ribbon e-ribbonpaste"
                                    }
                                }
                                ],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    isBig: true,
                                    width: 50,
                                    height: 70
                                }
                            },
                            {
                                groups: [{
                                    id: "cut",
                                    text: "Cut",
                                    buttonSettings: {
                                        contentType: ej.ContentType.TextAndImage,
                                        prefixIcon: "e-icon e-ribbon e-ribboncut"
                                    }
                                },
                                {
                                    id: "copy",
                                    text: "Copy",
                                    buttonSettings: {
                                        contentType: ej.ContentType.TextAndImage,
                                        prefixIcon: "e-icon e-ribbon e-ribboncopy"
                                    }
                                },
                                {
                                    id: "clear",
                                    text: "Clear",
                                    buttonSettings: {
                                        contentType: ej.ContentType.TextAndImage,
                                        prefixIcon: "e-icon e-ribbon clearAll"
                                    }
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    width: 60,
                                    isBig: false
                                }
                            }]
                        },
                        ]
                    },
    				{
    				    id: "layout", text: "LAYOUT", groups: [
    					{
    					    text: "Print Layout", alignType: ej.Ribbon.AlignType.Rows, content: [{
    					        groups: [{
    					            id: "printLayout",
    					            text: "Print Layout",
    					            buttonSettings: {
    					                contentType: ej.ContentType.TextAndImage,
    					                imagePosition: ej.ImagePosition.ImageTop,
    					                prefixIcon: "e-icon e-ribbon e-printlayout"
    					            }
    					        }
    					        ],
    					        defaults: {
    					            type: ej.Ribbon.Type.Button,
    					            width: 80,
    					            height: 70
    					        }
    					    }]
    					}]
    				}]
                });
            });

    enableRTL boolean

    Align content in the ribbon control from right to left by setting the property as true.

    Default Value:

    • false

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
        <li><a>ملف</a>
            <ul>
                <li><a>جديد</a></li>
                <li><a>فتح</a></li>
                <li><a>حفظ</a></li>
            </ul>
        </li>
        </ul>
        <script type="text/javascript">
        $(function () {
    
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                enableRTL: true,
                applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "ribbon", menuSettings: { openOnClick: false } },
                tabs: [{
                    id: "home", text: "منزل", groups: [{
                        text: "جديد", alignType: ej.Ribbon.AlignType.Rows, content: [{
                            groups: [{
                                id: "new",
                                text: "جديد",
                                toolTip: "جديد",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }
                            ],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 80
                            }
                        }]
                    },
                    ]
                },
                ]
            });
        });
        </script>

    expandPinSettings Object

    Sets custom setting to the expandable pin in the ribbon.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="defaultRibbon"></div>
           <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
            </ul>
            <script>
            $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                expandPinSettings:{				   
                            toolTip: "Collapse the Ribbon"                  
                        },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }],
                    }],
                }]
            });
        });
        </script>

    expandPinSettings.toolTip string

    Sets tooltip for the expand pin.

    Default Value:

    • null

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
           <li><a>FILE</a>
                <ul>
                 <li><a>New</a></li>
                 </ul>
            </li>
         </ul>
         <script>
                $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                expandPinSettings:{				   
                            toolTip: "Collapse the Ribbon"                  
                        },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }],
                    }],
                }]
            });
        });
        </script>

    expandPinSettings.customToolTip Object

    Specifies the custom tooltip for expand pin.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
        </ul>
        <script>
        $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                expandPinSettings:{
                            customToolTip:{
                            title: "Collapse the Ribbon",
                            content: "<h6>Click the icon to collapse the Ribbon.</h6>"
                            }
                        },
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-ribbon e-new",
                                    click: "executeAction"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }],
                    }],
                }]
            });
        });
        </script>

    applicationTab Object

    Specifies the application tab to contain application menu or backstage page in the ribbon control.

    Default Value:

    • Object

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
          $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
            });
         });
        </script>

    applicationTab.backstageSettings Object

    Specifies the ribbon backstage page items.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.text string

    Specifies the display text of application tab.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.height string|number

    Specifies the height of ribbon backstage page.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.width string|number

    Specifies the width of ribbon backstage page.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages Array

    Specifies the ribbon backstage page with its tab and button elements.

    Default Value:

    • Array

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages.id string

    Specifies the id for ribbon backstage page’s tab and button elements.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages.text string

    Specifies the text for ribbon backstage page’s tab header and button elements.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages.itemType enum

    Specifies the type for ribbon backstage page’s contents. Set “ej.Ribbon.BackStageItemType.Tab” to render the tab or “ej.Ribbon.BackStageItemType.Button” to render the button.

    Default Value:

    • ej.Ribbon.ItemType.Tab
    Name Description
    Button To render the button for ribbon backstage page’s contents
    Tab To render the tab for ribbon backstage page’s contents

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages.contentID string

    Specifies the id of HTML elements like div,ul, etc., as ribbon backstage page’s tab content.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.pages.enableSeparator boolean

    Specifies the separator between backstage page’s tab and button elements.

    Default Value:

    • false

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.backstageSettings.headerWidth string|number

    Specifies the width of backstage page header that contains tabs and buttons.

    Default Value:

    • null

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        </script>

    applicationTab.menuItemID string

    Specifies the ID of ul list to create application menu in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button </button>
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
                }]
                }]
        });
        });             
        </script>

    applicationTab.menuSettings Object

    Specifies the menu members, events by using the menu settings for the menu in the application tab.

    Default Value:

    • Object

    <ts ref = “ej.Menu.Model” />

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
                }]
                }]
        });
        });             
        </script>

    applicationTab.type enum

    Specifies the application menu or backstage page. Specify the type of application tab as “ej.Ribbon.ApplicationTabType.Menu” to render the application menu or “ej.Ribbon.ApplicationTabType.Backstage” to render backstage page in the ribbon control.

    Default Value:

    • ej.Ribbon.ApplicationTabType.Menu
    Name Description
    Menu applicationTab display as menu
    Backstage applicationTab display as backstage

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,type:"custom",contentID:"btn"
                }]
                }]
        });
        });             
        </script>

    contextualTabs Array

    Specifies the contextual tabs and tab set to the ribbon control with the background color and border color. Refer to the tabs section for adding tabs into the contextual tab and contextual tab set.

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <button id="design">Design button</button>
        <button id="div1">First button</button>
        <button id="div2">Second button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            contextualTabs: [{
                backgroundColor: "#FCFBEB",
                borderColor: "#F2CC1C",
                tabs: [{
                    id: "Design",
                    text: "DESIGN",
                    groups: [{
                        text: "Table Style Options",
                        type: "custom",
                        contentID: "design"
                    }]
                }]
            }, {
                borderColor: "lightblue",
                backgroundColor: "blue",
                tabs: [{
                    id: "tabset1",
                    text: "Tabset1",
                    groups: [{
                        text: "Tabset1 Styles",
                        type: "custom",
                        contentID: "div1"
                    }]
                }, {
                    id: "tabset2",
                    text: "Tabset2",
                    groups: [{
                        text: "Tabset2 Styles",
                        type: "custom",
                        contentID: "div2"
                    }]
                }]
            }]
        });
        });
        </script>

    contextualTabs.backgroundColor string

    Specifies the backgroundColor of the contextual tabs and tab set in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <button id="design">Design button</button>
        <button id="div1">First button</button>
        <button id="div2">Second button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             contextualTabs: [{
                 backgroundColor: "#FCFBEB",
                 borderColor: "#F2CC1C",
                 tabs: [{
                     id: "Design",
                     text: "DESIGN",
                     groups: [{
                         text: "Table Style Options",
                         type: "custom",
                         contentID: "design"
                     }]
                 }]
             }, {
                 borderColor: "lightblue",
                 backgroundColor: "blue",
                 tabs: [{
                     id: "tabset1",
                     text: "Tabset1",
                     groups: [{
                         text: "Tabset1 Styles",
                         type: "custom",
                         contentID: "div1"
                     }]
                 }, {
                     id: "tabset2",
                     text: "Tabset2",
                     groups: [{
                         text: "Tabset2 Styles",
                         type: "custom",
                         contentID: "div2"
                     }]
                 }]
             }]
         });
        });
        </script>

    contextualTabs.borderColor string

    Specifies the borderColor of the contextual tabs and tab set in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <button id="design">Design button</button>
        <button id="div1">First button</button>
        <button id="div2">Second button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            contextualTabs: [{
                backgroundColor: "#FCFBEB",
                borderColor: "#F2CC1C",
                tabs: [{
                    id: "Design",
                    text: "DESIGN",
                    groups: [{
                        text: "Table Style Options",
                        type: "custom",
                        contentID: "design"
                    }]
                }]
            }, {
                borderColor: "lightblue",
                backgroundColor: "blue",
                tabs: [{
                    id: "tabset1",
                    text: "Tabset1",
                    groups: [{
                        text: "Tabset1 Styles",
                        type: "custom",
                        contentID: "div1"
                    }]
                }, {
                    id: "tabset2",
                    text: "Tabset2",
                    groups: [{
                        text: "Tabset2 Styles",
                        type: "custom",
                        contentID: "div2"
                    }]
                }]
            }]
        });
        });    
        </script>

    contextualTabs.tabs Array

    Specifies the tabs to present in the contextual tabs and tab set. Refer to the tabs section for adding tabs into the contextual tabs and tab set.

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <button id="design">Design button</button>
        <button id="div1">First button</button>
        <button id="div2">Second button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             contextualTabs: [{
                 backgroundColor: "#FCFBEB",
                 borderColor: "#F2CC1C",
                 tabs: [{
                     id: "Design",
                     text: "DESIGN",
                     groups: [{
                         text: "Table Style Options",
                         type: "custom",
                         contentID: "design"
                     }]
                 }]
             }, {
                 borderColor: "lightblue",
                 backgroundColor: "blue",
                 tabs: [{
                     id: "tabset1",
                     text: "Tabset1",
                     groups: [{
                         text: "Tabset1 Styles",
                         type: "custom",
                         contentID: "div1"
                     }]
                 }, {
                     id: "tabset2",
                     text: "Tabset2",
                     groups: [{
                         text: "Tabset2 Styles",
                         type: "custom",
                         contentID: "div2"
                     }]
                 }]
             }]
         });
        });
        </script>

    disabledItemIndex Array

    Specifies the index or indexes to disable the given index tab or indexes tabs in the ribbon control.

    Default Value:

    • 0

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button<button>
        <button id="insert">Insert button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             width: "100%",
             // Set the disabledItemIndex during initialization. 
             disabledItemIndex: [1, 2],
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }, {
                 id: "insert",
                 text: "INSERT",
                 groups: [{
                     text: "Insert group",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "insert"
                 }]
             }]
         });
        });          
        </script>

    enabledItemIndex Array

    Specifies the index or indexes to enable the given index tab or indexes tabs in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button<button>
        <button id="insert">Insert button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }, {
                id: "insert",
                text: "INSERT",
                groups: [{
                    text: "Insert group",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "insert"
                }]
            }]
        });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        ribbonObj.option({
        disabledItemIndex: [1, 2]
        });
        // Enable the required ribbon tab from the ribbon control.
        ribbonObj.option({
        enabledItemIndex: [1]
        });
        </script>

    selectedItemIndex number

    Specifies the index of the ribbon tab to select the given index tab item in the ribbon control.

    Default Value:

    • 1

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button<button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            width: "100%",
            // Set the selectedItemIndex during initialization. 
            selectedItemIndex: 2,
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }, {
                id: "insert",
                text: "INSERT",
                groups: [{
                    text: "Insert group",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "insert"
                }]
            }]
        });
        });      
        </script>

    tabs Array

    Specifies the tabs and its groups. Also specifies the control details that has to be placed in the tab area in the ribbon control.

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <button id="insert">Insert button</button>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }, {
                 id: "insert",
                 text: "INSERT",
                 groups: [{
                     text: "Insert group",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "insert"
                 }]
             }]
         });
         }); 
        </script>

    tabs.groups Array

    Specifies single group or multiple groups and its contents to each tab in the ribbon control.

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });   
        </script>

    tabs.groups.alignType enum

    Specifies the alignment of controls in the groups in ‘row’ type or ‘column’ type. Value for row type is “ej.Ribbon.AlignType.Rows” and for column type is “ej.Ribbon.alignType.columns”.

    Default Value:

    • ej.Ribbon.AlignType.Rows
    Name Description
    Rows To align the group content's in row
    Columns To align group content's in columns

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });        
        </script>

    tabs.groups.content Array

    Specifies the Syncfusion button, split button, dropdown list, toggle button, gallery, custom controls to the groups in the ribbon control.

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.defaults Object

    Specifies the height, width, type, isBig property to the controls in the group commonly.

    Default Value:

    • Object

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                width: 100,
                                }
                            },
                               {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            height: 70
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.defaults.height string|number

    Specifies the controls height such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                width: 100,
                                }
                            },
                               {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            height: 70
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.defaults.width string|number

    Specifies the controls width such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                width: 100,
                                }
                            },
                               {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 70
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.defaults.type string

    Specifies the controls type such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.

    Default Value:

    • ej.Ribbon.Type.Button

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                width: 100,
                                }
                            },
                               {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 70
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.defaults.isBig boolean

    Specifies the controls size such as Syncfusion button,split button,dropdown list,toggle button in the subgroup of the ribbon tab.

    Default Value:

    • false

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                buttonSettings: {
                                width: 100,
                                }
                            },
                               {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 70,
                            isBig: true
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups Array

    Specifies the controls such as Syncfusion button, split button, dropdown list, toggle button, gallery, custom controls in the subgroup of the ribbon tab .

    Default Value:

    • Array

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.isMobileOnly boolean

    When isMobileOnly is true,its shows in mobile toolbar.isResponsive should be true for using this property.

    Default Value

    • false

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <script type="text/javascript">
            $(function () {
                $("#defaultRibbon").ejRibbon({
                    width: "100%",
                    allowResizing: true,
                    groupClick: function (args) {
                        if ($(args.target).hasClass("e-ribGroupContent") && args.targetElement == "resizedGroup")
                            this.goToMainContent();
                    },
                    tabs: [{
                        id: "home", text: "HOME", groups: [ {
                            text: "Font", alignType: "rows", content: [{
                                groups: [{
                                    id: "bold",
                                    type: ej.Ribbon.Type.ToggleButton,
                                    isMobileOnly: true,
                                    toggleButtonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        defaultText: "Bold",
                                        activeText: "Bold",
                                        defaultPrefixIcon: "e-icon e-ribbon e-resbold",
                                        activePrefixIcon: "e-icon e-ribbon e-resbold",
                                        click: "executeAction"
                                    }
                                },
                                   {
                                       id: "italic",
                                       type: ej.Ribbon.Type.ToggleButton,
                                       isMobileOnly: true,
                                       toggleButtonSettings: {
                                           contentType: ej.ContentType.ImageOnly,
                                           defaultText: "Italic",
                                           activeText: "Italic",
                                           defaultPrefixIcon: "e-icon e-ribbon e-resitalic",
                                           activePrefixIcon: "e-icon e-ribbon e-resitalic",
                                           click: "executeAction"
                                       }
                                   },
                                   {
                                       id: "underline",
                                       text: "Underline",
                                       type: ej.Ribbon.Type.ToggleButton,
                                       isMobileOnly: true,
                                       toggleButtonSettings: {
                                           contentType: ej.ContentType.ImageOnly,
                                           defaultText: "Underline",
                                           activeText: "Underline",
                                           defaultPrefixIcon: "e-icon e-ribbon e-resunderline",
                                           activePrefixIcon: "e-icon e-ribbon e-resunderline",
                                           click: "executeAction"
                                       }
                                   },
                                   {
                                       id: "strikethrough",
                                       text: "strikethrough",
                                       isMobileOnly: true,
                                       type: ej.Ribbon.Type.ToggleButton,
                                       toggleButtonSettings: {
                                           contentType: ej.ContentType.ImageOnly,
                                           defaultText: "Strikethrough",
                                           activeText: "Strikethrough",
                                           defaultPrefixIcon: "e-icon e-ribbon strikethrough",
                                           activePrefixIcon: "e-icon e-ribbon strikethrough",
                                           click: "executeAction"
                                       }
                                   },
                                   {
                                       id: "superscript",
                                       text: "superscript",
                                       isMobileOnly: true,
                                       buttonSettings: {
                                           contentType: ej.ContentType.ImageOnly,
                                           prefixIcon: "e-icon e-ribbon e-superscripticon",
                                           click: "executeAction"
                                       }
                                   }
                                ],
                                defaults: {
                                    isBig: false
                                }
                            }, ]
                        },
    				]
                    },
    			],
                    create: "createControl",
                });
            });
        </script>
        <style>
            .e-ribbon .e-Font:before {
                font-family: 'ej-ribbonfont';
                content: "\e90e";
                top: 7px !important;
                text-indent: -2px;
            }
        </style>

    tabs.groups.content.groups.buttonSettings Object

    Specifies the Syncfusion button members, events by using this buttonSettings.

    Default Value:

    • Object

    <ts ref = “ej.Button.Model” />

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
            <script type="text/javascript">   
            $(function() {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "100%",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                isBig: true,
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                    width: 100,
                                }
                            }]
                        }]
                    }]
                }]
            });
            });        
        </script>

    tabs.groups.content.groups.columns number

    It is used to set the count of gallery contents in a row.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li>
            <a>FILE </a>
            <ul>
            <li><a>New</a></li>
            <li><a>Open</a></li>
            <li><a>Save</a></li>
            <li><a>Save as</a></li>
            <li><a>Print</a></li>
            </ul>
        </li>
        </ul>
        <div id="Ribbon"></div>
        <ul id="customMenu">
        <li>
            <a>New Quick Step</a>
            <ul>
            <li><a>Move to new folder</a></li>
            <li><a>Categorize &amp; Move</a></li>
            <li><a>Flag &amp; Move</a></li>
            </ul>
        </li>
        </ul>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Gallery",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "Gallery",
                            columns: 3,
                            itemHeight: 65,
                            itemWidth: 68,
                            expandedColumns: 4,
                            type: ej.Ribbon.type.gallery,
                            galleryItems: [{
                                text: "Content1",
                                toolTip: "GalleryContent1"
                            }, {
                                text: "Content2",
                                toolTip: "GalleryContent2"
                            }, {
                                text: "Content3",
                                toolTip: "GalleryContent3"
                            }, {
                                text: "Content4",
                                toolTip: "GalleryContent4"
                            }, {
                                text: "Content5",
                                toolTip: "GalleryContent5"
                            }, {
                                text: "Content6",
                                toolTip: "GalleryContent6"
                            }],
                            customGalleryItems: [{
                                customItemType: ej.Ribbon.customItemType.menu,
                                menuId: "customMenu",
                                menuSettings: {
                                    openOnClick: false
                                }
                            }, {
                                text: "Save Selection as new quick style",
                                toolTip: "Save Selection as new quick style",
                                customItemType: ej.Ribbon.customItemType.button,
                                buttonSettings: {
                                    cssClass: "e-extrabtnstyle"
                                }
                            }]
                        }]
                    }]
                }]
            }]
        });
        }); 
        </script>

    tabs.groups.content.groups.contentID string

    Specifies the custom items such as div, table, controls as custom controls with the type “ej.Ribbon.Type.Custom” in the groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <input id="fontColor"/> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "new",
                            text: "New",
                            toolTip: "New",
                            type: ej.Ribbon.Type.Button,
                            buttonSettings: {
                                width: 160,
                                height: 50
                            }
                        }, {
                            id: "fontColor",
                            text: "Font Color",
                            toolTip: "Font Color",
                            type: ej.Ribbon.Type.Custom,
                            contentID: "fontColor"
                        }]
                    }]
                }]
            }],
            create: "createControl",
        });
        });
    
        function createControl(args) {
        $("#fontColor").ejColorPicker({
            value: "#FFFF00",
            modelType: "palette",
            cssClass: "e-ribbon",
            toolIcon: "e-icon e-fontcoloricon"
        });
        }
        </script>

    tabs.groups.content.groups.cssClass string

    Specifies the CSS class property to apply styles to the button, split, dropdown controls in the groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <style>
        .e-cssclass {
            margin-left: 20px;
        }
        </style>
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                cssClass:"e-cssclass",
                                isBig:true,
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 100,
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.customGalleryItems Array

    Specifies the Syncfusion button and menu as gallery extra items.

    Default Value:

    • Array

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                     </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        }); 
        </script>

    tabs.groups.content.groups.customGalleryItems.buttonSettings Object

    Specifies the Syncfusion button members, events by using buttonSettings.

    Default Value:

    • Object

    <ts ref = “ej.Button.Model” />

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 customToolTip: {
                                     title: "<u>Save</u>",
                                     content: "<i>Save Selection as new quick style</i>",
                                     prefixIcon: "e-expander",
                                 },
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
         });       
        </script>

    tabs.groups.content.groups.customGalleryItems.customItemType enum

    Specifies the type as ej.Ribbon.CustomItemType.Menu or ej.Ribbon.CustomItemType.Button to render Syncfusion button and menu.

    Default Value:

    • ej.Ribbon.CustomItemType.Button
    Name Description
    Button Specifies the button type in customGalleryItems
    Menu Specifies the menu type in customGalleryItems

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 customToolTip: {
                                     title: "<u>Save</u>",
                                     content: "<i>Save Selection as new quick style</i>",
                                     prefixIcon: "e-expander",
                                 },
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
         }); 
        </script>

    tabs.groups.content.groups.customGalleryItems.customToolTip Object

    Specifies the custom tooltip for gallery extra item’s button. Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.

    Default Value:

    • Object

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                        </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 customToolTip: {
                                     title: "<u>Save</u>",
                                     content: "<i>Save Selection as new quick style</i>",
                                     prefixIcon: "e-expander",
                                 },
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        });       
        </script>

    tabs.groups.content.groups.customGalleryItems.menuId string

    Specifies the UL list id to render menu as gallery extra item.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                     <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 customToolTip: {
                                     title: "<u>Save</u>",
                                     content: "<i>Save Selection as new quick style</i>",
                                     prefixIcon: "e-expander",
                                 },
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        }); 
        </script>

    tabs.groups.content.groups.customGalleryItems.menuSettings Object

    Specifies the Syncfusion menu members, events by using menuSettings.

    Default Value:

    • Object

    <ts ref = “ej.Menu.Model” />

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 customToolTip: {
                                     title: "<u>Save</u>",
                                     content: "<i>Save Selection as new quick style</i>",
                                     prefixIcon: "e-expander",
                                 },
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
         }); 
        </script>

    tabs.groups.content.groups.customGalleryItems.text string

    Specifies the text for gallery extra item’s button.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function () {
           $("#Ribbon").ejRibbon({
         // Set the width during initialization.         
          width: "700px",
          applicationTab: {
          type: ej.Ribbon.ApplicationTabType.Menu,
          menuItemID: "menu",
          menuSettings: {
              openOnClick: false
          }
        },
         tabs: [{
          id: "home",
          text: "HOME",
          groups: [{
              text: "Gallery",
              alignType: ej.Ribbon.AlignType.Rows,
              content: [{
                  groups: [{
                      id: "Gallery",
                      columns: 3,
                      itemHeight: 65,
                      itemWidth: 68,
                      expandedColumns: 4,
                      type: ej.Ribbon.type.gallery,
                      galleryItems: [{
                          text: "Content1",
                          toolTip: "GalleryContent1"
                      }, {
                          text: "Content2",
                          toolTip: "GalleryContent2"
                      }, {
                          text: "Content3",
                          toolTip: "GalleryContent3"
                      }, {
                          text: "Content4",
                          toolTip: "GalleryContent4"
                      }, {
                          text: "Content5",
                          toolTip: "GalleryContent5"
                      }, {
                          text: "Content6",
                          toolTip: "GalleryContent6"
                      }],
                      customGalleryItems: [{
                          customItemType: ej.Ribbon.customItemType.menu,
                          menuId: "customMenu",
                          menuSettings: {
                              openOnClick: false
                          }
                      }, {
                          text: "Save Selection as new quick style",
                          toolTip: "Save Selection as new quick style",
                          customItemType: ej.Ribbon.customItemType.button,
                          buttonSettings: {
                              cssClass: "e-extrabtnstyle"
                          }
                      }]
                  }]
              }]
          }]
         }]
        });
        });   
        </script>

    tabs.groups.content.groups.customGalleryItems.toolTip string

    Specifies the tooltip for gallery extra item’s button.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
         $(function() {
          $("#Ribbon").ejRibbon({
              // Set the width during initialization.         
              width: "700px",
              applicationTab: {
                  type: ej.Ribbon.ApplicationTabType.Menu,
                  menuItemID: "menu",
                  menuSettings: {
                      openOnClick: false
                  }
              },
              tabs: [{
                  id: "home",
                  text: "HOME",
                  groups: [{
                      text: "Gallery",
                      alignType: ej.Ribbon.AlignType.Rows,
                      content: [{
                          groups: [{
                              id: "Gallery",
                              columns: 3,
                              itemHeight: 65,
                              itemWidth: 68,
                              expandedColumns: 4,
                              type: ej.Ribbon.type.gallery,
                              galleryItems: [{
                                  text: "Content1",
                                  toolTip: "GalleryContent1"
                              }, {
                                  text: "Content2",
                                  toolTip: "GalleryContent2"
                              }, {
                                  text: "Content3",
                                  toolTip: "GalleryContent3"
                              }, {
                                  text: "Content4",
                                  toolTip: "GalleryContent4"
                              }, {
                                  text: "Content5",
                                  toolTip: "GalleryContent5"
                              }, {
                                  text: "Content6",
                                  toolTip: "GalleryContent6"
                              }],
                              customGalleryItems: [{
                                  customItemType: ej.Ribbon.customItemType.menu,
                                  menuId: "customMenu",
                                  menuSettings: {
                                      openOnClick: false
                                  }
                              }, {
                                  text: "Save Selection as new quick style",
                                  toolTip: "Save Selection as new quick style",
                                  customItemType: ej.Ribbon.customItemType.button,
                                  buttonSettings: {
                                      cssClass: "e-extrabtnstyle"
                                  }
                              }]
                          }]
                      }]
                  }]
              }]
          });
        });           
        </script>

    tabs.groups.content.groups.customToolTip Object

    Provides custom tooltip for button, split button, dropdown list, toggle button, custom controls in the sub groups. Text and HTML support are also provided for title and content.

    Default Value:

    • Object

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Expand",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "expand",
                             text: "Expand Button",
                             customToolTip: {
                                 title: "<i&amp;gtExpand</i>",
                                 content: "<h5&amp;gtExpand content</h5>",
                                 prefixIcon: "e-expander",
                             }
                         }, {
                             id: "new",
                             text: "New Button",
                             customToolTip: {
                                 title: "New",
                                 content: "New content"
                             }
                         }]
                     }]
                 }]
             }]
         });
        }); 
        </script>

    tabs.groups.content.groups.customToolTip.content string

    Sets content to the custom tooltip. Text and HTML support are provided for content.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
          $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Expand",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "expand",
                             text: "Expand Button",
                             customToolTip: {
                                 title: "<i&amp;gtExpand</i>",
                                 content: "<h5&amp;gtExpand content</h5>",
                                 prefixIcon: "e-expander",
                             }
                         }, {
                             id: "new",
                             text: "New Button",
                             customToolTip: {
                                 title: "New",
                                 content: "New content"
                             }
                         }]
                     }]
                 }]
             }]
         });
        });    
        </script>

    tabs.groups.content.groups.customToolTip.prefixIcon string

    Sets icon to the custom tooltip content.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Expand",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "expand",
                            text: "Expand Button",
                            customToolTip: {
                                title: "<i>Expand</i>",
                                content: "<h5>Expand content</h5>",
                                prefixIcon: "e-expander",
                            }
                        }, {
                            id: "new",
                            text: "New Button",
                            customToolTip: {
                                title: "New",
                                content: "New content"
                            }
                        }]
                    }]
                }]
            }]
        });
        });  
        </script>

    tabs.groups.content.groups.customToolTip.title string

    Sets title to the custom tooltip. Text and HTML support are provided for title and the title is in bold for text format.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Expand",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "expand",
                            text: "Expand Button",
                            customToolTip: {
                                title: "<i>Expand</i>",
                                content: "<h5>Expand content</h5>",
                                prefixIcon: "e-expander",
                            }
                        }, {
                            id: "new",
                            text: "New Button",
                            customToolTip: {
                                title: "New",
                                content: "New content"
                            }
                        }]
                    }]
                }]
            }]
        });
        });         
        </script>

    tabs.groups.content.groups.dropdownSettings Object

    Specifies the Syncfusion dropdown list members, events by using this dropdownSettings.

    Default Value:

    • Object

    <ts ref = “ej.DropDownList.Model” />

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <style>
        .e-cssclass {
            margin-left: 20px;
        }
        </style>
        <script type="text/javascript">  
        var fontFamily = ["Segoe UI", "Arial", "Times New Roman", "Tahoma", "Helvetica"];
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "fontFamily",
                            toolTip: "Font",
                            type: ej.Ribbon.Type.DropDownList,
                            dropdownSettings: {
                                dataSource: fontFamily,
                                value: "Segoe UI",
                                width: 150
                            }
                        }]
                    }]
                }]
            }]
        });
        });         
        </script>

    tabs.groups.content.groups.enableSeparator boolean

    Specifies the separator to the control that is in row type group. The separator separates the control from the next control in the group. Set “true” to enable the separator.

    Default Value:

    • false

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                enableSeparator: true,
                                buttonSettings: {
                                width: 100,
                                }
                            },
                              {
                                id: "font",
                                text: "Font",
                                toolTip: "Font",
                                buttonSettings: {
                                width: 150,
                                }
                            }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                            height: 70
                        }
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.expandedColumns number

    Sets the count of gallery contents in a row, when the gallery is in expanded state.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        });     
        </script>

    tabs.groups.content.groups.galleryItems Array

    Defines each gallery content.

    Default Value:

    • Array

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        });  
        </script>

    tabs.groups.content.groups.galleryItems.buttonSettings Object

    Specifies the Syncfusion button members, events by using buttonSettings.

    Default Value:

    • Object

    <ts ref = “ej.Button.Model” />

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        .e-gallerycontent1{
        font-style: italic;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1",
                                 buttonSettings: {
                                     cssClass: "e-gallerycontent1"
                                 }
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        });
        </script>

    tabs.groups.content.groups.galleryItems.customToolTip Object

    Specifies the custom tooltip for gallery content. Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.

    Default Value:

    • Object

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Gallery",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "Gallery",
                            columns: 3,
                            itemHeight: 65,
                            itemWidth: 68,
                            expandedColumns: 4,
                            type: ej.Ribbon.type.gallery,
                            galleryItems: [{
                                text: "Content1",
                                customToolTip: {
                                    title: "<u>GalleryContent</u>",
                                    content: "<b>GalleryContent 1</b>",
                                    prefixIcon: "e-expander",
                                }
                            }, {
                                text: "Content2",
                                toolTip: "GalleryContent2"
                            }, {
                                text: "Content3",
                                toolTip: "GalleryContent3"
                            }, {
                                text: "Content4",
                                toolTip: "GalleryContent4"
                            }, {
                                text: "Content5",
                                toolTip: "GalleryContent5"
                            }, {
                                text: "Content6",
                                toolTip: "GalleryContent6"
                            }],
                            customGalleryItems: [{
                                customItemType: ej.Ribbon.customItemType.menu,
                                menuId: "customMenu",
                                menuSettings: {
                                    openOnClick: false
                                }
                            }, {
                                text: "Save Selection as new quick style",
                                toolTip: "Save Selection as new quick style",
                                customItemType: ej.Ribbon.customItemType.button,
                                buttonSettings: {
                                    cssClass: "e-extrabtnstyle"
                                }
                            }]
                        }]
                    }]
                }]
            }]
        });
        });        
        </script>

    tabs.groups.content.groups.galleryItems.text string

    Sets text for the gallery content.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
         });  
        </script>

    tabs.groups.content.groups.galleryItems.toolTip string

    Sets tooltip for the gallery content.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Gallery",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "Gallery",
                            columns: 3,
                            itemHeight: 65,
                            itemWidth: 68,
                            expandedColumns: 4,
                            type: ej.Ribbon.type.gallery,
                            galleryItems: [{
                                text: "Content1",
                                toolTip: "GalleryContent1"
                            }, {
                                text: "Content2",
                                toolTip: "GalleryContent2"
                            }, {
                                text: "Content3",
                                toolTip: "GalleryContent3"
                            }, {
                                text: "Content4",
                                toolTip: "GalleryContent4"
                            }, {
                                text: "Content5",
                                toolTip: "GalleryContent5"
                            }, {
                                text: "Content6",
                                toolTip: "GalleryContent6"
                            }],
                            customGalleryItems: [{
                                customItemType: ej.Ribbon.customItemType.menu,
                                menuId: "customMenu",
                                menuSettings: {
                                    openOnClick: false
                                }
                            }, {
                                text: "Save Selection as new quick style",
                                toolTip: "Save Selection as new quick style",
                                customItemType: ej.Ribbon.customItemType.button,
                                buttonSettings: {
                                    cssClass: "e-extrabtnstyle"
                                }
                            }]
                        }]
                    }]
                }]
            }]
        });
        });   
        </script>

    tabs.groups.content.groups.id string

    Specifies the Id for button, split button, dropdown list, toggle button, gallery, custom controls in the sub groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.isBig boolean

    Specifies the size for button, split button controls. Set “true” for big size and “false” for small size.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                isBig:true,
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 100
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.itemHeight string|number

    Sets the height of each gallery content.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
                                 toolTip: "Save Selection as new quick style",
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }]
         });
        });    
        </script>

    tabs.groups.content.groups.itemWidth string|number

    Sets the width of each gallery content.

    Default Value:

    • null

    Example

  • HTML
  • <style>
        .e-extracontent .e-extrabtnstyle{
        padding-left: 28px;
        text-align: left;
        }
        </style>
        <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="customMenu">
                    <li><a>New Quick Step</a>
                    <ul>
                    <li><a>Move to new folder</a></li>
                    <li><a>Categorize &amp; Move</a></li>
                    <li><a>Flag &amp; Move</a></li>
                    </ul>
                    </li>
            </ul>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "Gallery",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "Gallery",
                            columns: 3,
                            itemHeight: 65,
                            itemWidth: 68,
                            expandedColumns: 4,
                            type: ej.Ribbon.type.gallery,
                            galleryItems: [{
                                text: "Content1",
                                toolTip: "GalleryContent1"
                            }, {
                                text: "Content2",
                                toolTip: "GalleryContent2"
                            }, {
                                text: "Content3",
                                toolTip: "GalleryContent3"
                            }, {
                                text: "Content4",
                                toolTip: "GalleryContent4"
                            }, {
                                text: "Content5",
                                toolTip: "GalleryContent5"
                            }, {
                                text: "Content6",
                                toolTip: "GalleryContent6"
                            }],
                            customGalleryItems: [{
                                customItemType: ej.Ribbon.customItemType.menu,
                                menuId: "customMenu",
                                menuSettings: {
                                    openOnClick: false
                                }
                            }, {
                                text: "Save Selection as new quick style",
                                toolTip: "Save Selection as new quick style",
                                customItemType: ej.Ribbon.customItemType.button,
                                buttonSettings: {
                                    cssClass: "e-extrabtnstyle"
                                }
                            }]
                        }]
                    }]
                }]
            }]
        });
        });     
        </script>

    tabs.groups.content.groups.splitButtonSettings Object

    Specifies the Syncfusion split button members, events by using this splitButtonSettings.

    Default Value:

    • Object

    <ts ref = “ej.SplitButton.Model” />

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <ul id="split">
        <li><span>Paste</span></li>
        </ul>
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                isBig:true,
                                type: ej.Ribbon.Type.SplitButton,
                                splitButtonSettings: {
                                targetID: "split",
                                buttonMode: "dropdown",
                                arrowPosition:"bottom"
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.text string

    Specifies the text for button, split button, toggle button controls in the sub groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.toggleButtonSettings Object

    Specifies the Syncfusion toggle button members, events by using toggleButtonSettings.

    Default Value:

    • Object

    <ts ref = “ej.ToggleButton.Model” />

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "bold",
                                toolTip: "Bold",
                                isBig:true,
                                type: ej.Ribbon.Type.ToggleButton,
                                toggleButtonSettings: {
                                defaultText: "Bold",
                                activeText: "BoldTog"
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.toolTip string

    Specifies the tooltip for button, split button, dropdown list, toggle button, custom controls in the sub groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.content.groups.quickAccessMode enum

    To add,show and hide controls in Quick Access toolbar.

    Name Description
    None Controls are hidden in Quick Access toolbar
    ToolBar Add controls in toolBar
    Menu Add controls in menu

    Default Value:

    • ej.Ribbon.QuickAccessMode.None

    Example

  • HTML
  • <ul id="ribbon">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">   
            $(function () {
                $("#Ribbon").ejRibbon({
                    width: "100%",
                    showQAT: true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "Font",
                            alignType: ej.Ribbon.AlignType.Rows,
                            content: [{
                                groups: [{
                                    id: "bold",
                                    text: "Bold",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon bold"
                                    }
                                }, {
                                    id: "italic",
                                    text: "Italic",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon e-ribbonitalic"
                                    }
                                }, {
                                    id: "underline",
                                    text: "Underline",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    buttonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon e-ribbonunderline"
                                    }
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.Button,
                                    height: 30
                                }
                            }]
                        }]
                    }]
                });
            });
        </script>

    tabs.groups.content.groups.type enum

    Specifies the type as “ej.Ribbon.Type.Button” or “ej.Ribbon.Type.SplitButton” or “ej.Ribbon.Type.DropDownList” or “ej.Ribbon.Type.ToggleButton” or “ej.Ribbon.Type.Custom” or “ej.Ribbon.Type.Gallery” to render button, split, dropdown, toggle button, gallery, custom controls.

    Default Value:

    • ej.Ribbon.Type.Button
    Name Description
    Button Specifies the button control
    SplitButton Specifies the split button
    DropDownList Specifies the dropDown
    Custom To append external element's
    ToggleButton Specifies the toggle button
    Gallery Specifies the ribbon gallery

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {
            $("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "100%",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                        text: "New", alignType: ej.Ribbon.AlignType.Rows,content: [{
                            groups: [{
                                id: "new",
                                text: "New",
                                toolTip: "New",
                                type: ej.Ribbon.Type.Button,
                                buttonSettings: {
                                width: 160,
                                height: 50
                                }
                            }]
                        }]
                }]
                }]
        });
        });             
        </script>

    tabs.groups.contentID string

    Specifies the ID of custom items to be placed in the groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });      
        </script>

    tabs.groups.customContent string

    Specifies the HTML contents to place into the groups.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     type: "custom",
                     customContent: "<button id='customContent'>Custom Content</button>"
                 }]
             }]
         });
        });        
        </script>

    tabs.groups.enableGroupExpander boolean

    Specifies the group expander for groups in the ribbon control. Set “true” to enable the group expander.

    Default Value:

    • false

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    enableGroupExpander: true,
                    contentID: "btn"
                }]
            }]
        });
        });      
        </script>

    tabs.groups.groupExpanderSettings Object

    Sets custom setting to the groups in the ribbon control.

    Default Value:

    • Object

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
        </ul>
        <script>
            $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        enableGroupExpander: true,
                        groupExpanderSettings:{   
                                    toolTip: "Clipboard"                       
                                }
                    }]
                }]
            });
        });
            </script>

    tabs.groups.groupExpanderSettings.toolTip string

    Sets tooltip for the group expander of the group.

    Default Value:

    • null

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
        </ul>
        <script>
            $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        enableGroupExpander: true,
                        groupExpanderSettings:{   
                                    toolTip: "Clipboard"                       
                                }
                    }]
                }]
            });
        });
            </script>

    tabs.groups.groupExpanderSettings.customToolTip Object

    Specifies the custom tooltip for group expander.Refer to ejRibbon#tabs->groups->content->groups->customToolTip for its inner properties.

    Default Value:

    • Object

    Example

  • HTML
  • div id="defaultRibbon"></div>
        <ul id="ribbon">
    				<li><a>FILE</a>
                        <ul>
                        <li><a>New</a></li>
                        <li><a>Open</a></li>
    			    	</ul>
    				</li>
        </ul>
        <script>
            $(function() {
            $("#defaultRibbon").ejRibbon({
                width: "100%",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        enableGroupExpander: true,
                        groupExpanderSettings:{   
                                    customToolTip:{
                                    title: "Clipboard",
                                    content: "<h6>Show a popup for the Clipboard group.</h6>"
                                    }                     
                                }
                    }]
                }]
            });
        });
        </script>

    tabs.groups.text string

    Specifies the text to the groups in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });         
        </script>

    tabs.groups.type string

    Specifies the custom items such as div, table, controls by using the “custom” type.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });      
        </script>

    tabs.id string

    Specifies the ID for each tab’s content panel.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });     
        </script>

    tabs.text string

    Specifies the text of the tab in the ribbon control.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });       
        </script>

    locale string

    Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region and it will need to use the user’s preference.

    Default Value:

    • “en-US”

    Example

  • HTML
  • <div id="defaultRibbon"></div>
        <ul id="ribbon">
           <li><a>FILE</a>
                <ul>
                 <li><a>New</a></li>
                 </ul>
            </li>
         </ul>
         <script>
                ej.Ribbon.Locale["es-ES"] = {
                CustomizeQuickAccess: "Agordu Rapida Aliro",
                MoreCommands: "pli Komando"
            };
            
            $(function() {
                $("#defaultRibbon").ejRibbon({
                    width: "100%",
                    locale: "es-ES",
                    showQAT: true,
                    applicationTab: {
                        type: ej.Ribbon.ApplicationTabType.Menu,
                        menuItemID: "ribbon",
                        menuSettings: {
                            openOnClick: false
                        }
                    },
                    tabs: [{
                        id: "home",
                        text: "HOME",
                        groups: [{
                            text: "Clipboard",
                            alignType: ej.Ribbon.alignType.columns,
                            content: [{
                                groups: [{
                                    id: "paste",
                                    text: "paste",
                                    toolTip: "Paste",
                                    quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                    splitButtonSettings: {
                                        contentType: ej.ContentType.ImageOnly,
                                        prefixIcon: "e-ribbon e-ribbonpaste",
                                        targetID: "pasteSplit",
                                        buttonMode: "dropdown",
                                        arrowPosition: ej.ArrowPosition.Bottom,
                                        click: "executeAction"
                                    }
                                }],
                                defaults: {
                                    type: ej.Ribbon.Type.SplitButton,
                                    width: 50,
                                    height: 70
                                }
                            }]
                        }]
                    }]
                });
            
            });
         </script>

    width string|number

    Specifies the width to the ribbon control. You can set width in string or number format.

    Default Value:

    • null

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });        
        </script>

    Methods

    addContextualTabs(contextualTabSet, [index])

    Adds contextual tab or contextual tab set dynamically in the ribbon control with contextual tabs object and index position. When index is null, ribbon contextual tab or contextual tab set is added at the last index.

    Name Type Description
    contextualTabSet object contextual tab or contextual tab set object.
    index number index of the contextual tab or contextual tab set, this is optional.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <div id="design">ContextualTab</div>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
         var cTab = {
             backgroundColor: "#FCFBEB",
             borderColor: "#F2CC1C",
             tabs: [{
                 id: "Design",
                 text: "DESIGN",
                 groups: [{
                     text: "Table Style",
                     type: "custom",
                     contentID: "design"
                 }]
             }]
         }
         //initialize the Ribbon object
         var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Add new contextual tab or contextual tab set with given list
         ribbonObj.addContextualTabs(cTab, 2);
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <div id="design">ContextualTab</div>
        <script type="text/javascript">   
         $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        var cTab = {
         backgroundColor: "#FCFBEB",
         borderColor: "#F2CC1C",
         tabs: [{
             id: "Design",
             text: "DESIGN",
             groups: [{
                 text: "Table Style",
                 type: "custom",
                 contentID: "design"
             }]
         }]
        }
         $("#Ribbon").ejRibbon("addContextualTabs", cTab, 2);
        </script>

    addBackStageItem(item,[index])

    Add new option to Backstage page.

    Name Type Description
    item object select the object to add the backstage item
    index number index to the backstage item this is optional.

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var addBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
        //initialize the Ribbon object
         var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Add backstage items to the ribbon
         ribbonObj.addBackStageItem(addBackStage, 1);
        </script>
  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var addBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
         $("#Ribbon").ejRibbon("addBackStageItem",addBackStage, 1); 
        </script>

    addTab(tabText, ribbonGroups, [index])

    Adds tab dynamically in the ribbon control with given name, tab group array and index position. When index is null, ribbon tab is added at the last index.

    Name Type Description
    tabText string ribbon tab display text.
    ribbonGroups array groups to be displayed in ribbon tab .
    index number index of the ribbon tab,this is optional.

    Example

  • HTML
  • <ul id="menu">
            <li><a>FILE </a>
            <ul>
            <li><a>New</a></li>
            <li><a>Open</a></li>
            <li><a>Save</a></li>
            <li><a>Save as</a></li>
            <li><a>Print</a></li>
            </ul></li></ul>
            <div id="Ribbon"></div> 
            <button id="btn">Home button</button>
            <script type="text/javascript">   
            $(function() {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "700px",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
            });
            var tabGroup = [{
            text: "New",
            alignType: ej.Ribbon.AlignType.Rows,
            content: [{
                groups: [{
                    id: "new",
                    text: "New",
                    toolTip: "New"
                }],
                defaults: {
                    type: ej.Ribbon.Type.Button,
                    width: 60,
                    height: 70
                }
            }]
            }];
            //initialize the Ribbon object
            var ribbonObj = $("#Ribbon").data("ejRibbon");
            // Add new ribbon tab with given list
            ribbonObj.addTab("Tab2", tabGroup, 2);
            </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
    });
        var tabGroup = [{
        text: "New",
        alignType: ej.Ribbon.AlignType.Rows,
        content: [{
            groups: [{
                id: "new",
                text: "New",
                toolTip: "New"
            }],
            defaults: {
                type: ej.Ribbon.Type.Button,
                width: 60,
                height: 70
            }
        }]
        }];
        $("#Ribbon").ejRibbon("addTab", "Tab2", tabGroup, 2); 
        </script>

    addTabGroup(tabIndex, tabGroup, [groupIndex])

    Adds tab group dynamically in the ribbon control with given tab index, tab group object and group index position. When group index is null, ribbon group is added at the last index.

    Name Type Description
    tabIndex number ribbon tab index.
    tabGroup object group to be displayed in ribbon tab .
    groupIndex number index of the ribbon group,this is optional.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "One",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "one",
                            text: "one"
                        }, {
                            id: "two",
                            text: "two"
                        }],
                        defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 60,
                            height: 70
                        }
                    }]
                }]
            }]
        });
        });
        var ribbonGroup = {
        text: "New",
        alignType: ej.Ribbon.AlignType.Rows,
        content: [{
            groups: [{
                id: "new",
                text: "New"
            }],
            defaults: {
                type: ej.Ribbon.Type.Button,
                width: 60,
                height: 70
            }
        }]
        };
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Add new ribbon group with given list
        ribbonObj.addTabGroup(1, ribbonGroup, 0);
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "One",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "one",
                            text: "one"
                        }, {
                            id: "two",
                            text: "two"
                        }],
                        defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 60,
                            height: 70
                        }
                    }]
                }]
            }]
        });
        });
        var ribbonGroup = {
            text: "New",
            alignType: ej.Ribbon.AlignType.Rows,
            content: [{
                groups: [{
                    id: "new",
                    text: "New"
                }],
                defaults: {
                    type: ej.Ribbon.Type.Button,
                    width: 60,
                    height: 70
                }
            }]
        };
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        $("#Ribbon").ejRibbon("addTabGroup", 1, ribbonGroup, 0);
        $("#Ribbon").ejRibbon("addTab", "Tab2", tabGroup, 2);
        </script>

    addTabGroupContent(tabIndex, groupIndex, content, [contentIndex], [subGroupIndex])

    Adds group content dynamically in the ribbon control with given tab index, group index, content, content index and sub group index position. When content index is null, content is added at the last index.

    Name Type Description
    tabIndex number ribbon tab index.
    groupIndex number ribbon group index.
    content object content to be displayed in the ribbon group.
    contentIndex number ribbon content index. This is optional. If the value is not given, then by default contentIndex will be considered as 0.
    subGroupIndex number sub group index in the ribbon group. This is optional. If the value is not given, then by default contentIndex will be considered as 0.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "One",
                    alignType: ej.Ribbon.AlignType.Rows,
                    content: [{
                        groups: [{
                            id: "one",
                            text: "one"
                        }, {
                            id: "two",
                            text: "two"
                        }],
                        defaults: {
                            type: ej.Ribbon.Type.Button,
                            width: 60,
                            height: 70
                        }
                    }]
                }]
            }]
        });
        });
        var content = {
            id: "new",
            text: "new",
        };
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Add new ribbon content with given list
        ribbonObj.addTabGroupContent(1, 0, content, 0, 0);
            </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <script type="text/javascript">   
        $(function () {$("#Ribbon").ejRibbon({
        // Set the width during initialization.         
            width: "700px",
            applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "menu", menuSettings: { openOnClick: false } },
            tabs: [{
                id: "home", text: "HOME", groups: [{
                    text: "One", alignType: ej.Ribbon.AlignType.Rows, content: [{
                        groups: [{
                            id: "one",
                            text: "one"
                        },{
                            id: "two",
                            text: "two"
                        }],
                            defaults: {
                            type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                    }]
                }]
            }]
        });        
        });         
         var content= {
                        id: "new",
                        text: "new",
                    };
                //initialize the Ribbon object
                $("#Ribbon").ejRibbon("addTabGroupContent",1,0,content,0,0); 
        
        </script>

    hideBackstage()

    Hides the ribbon backstage page.

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // hide the ribbon backstage page.
        ribbonObj.hideBackstage();
        </script>
  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        $("#Ribbon").ejRibbon("hideBackstage");
        </script>

    collapse()

    Collapses the ribbon tab content.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // collapse the ribbon control.
        ribbonObj.collapse();
            </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "700px",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        $("#Ribbon").ejRibbon("collapse");
        </script>

    destroy()

    Destroys the ribbon widget. All the events bound using this._on are unbound automatically and the ribbon control is moved to pre-init state.

    Example

  • JAVASCRIPT
  • <script>
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        ribbonObj.destroy(); // destroy the ribbon
        </script>
  • JAVASCRIPT
  • <script>
        // destroy the ribbon
        $("#Ribbon").ejRibbon("destroy");        
        </script>

    expand()

    Expands the ribbon tab content.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // expand the ribbon control.
        ribbonObj.collapse();
        ribbonObj.expand();
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "700px",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        $("#Ribbon").ejRibbon("collapse");
        $("#Ribbon").ejRibbon("expand");
        </script>

    getTabText(index)

    Gets text of the given index tab in the ribbon control.

    Name Type Description
    index number index of the tab item.

    Returns:

    string

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // To get text of the given index tab in the ribbon control.
        ribbonObj.getTabText(1);
            </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        $("#Ribbon").ejRibbon("getTabText", 1);
        </script>

    hideTab(text)

    Hides the given text tab in the ribbon control.

    Name Type Description
    text string text of the tab item.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
          $(function() {
          $("#Ribbon").ejRibbon({
              // Set the width during initialization.         
              width: "100%",
              applicationTab: {
                  type: ej.Ribbon.ApplicationTabType.Menu,
                  menuItemID: "menu",
                  menuSettings: {
                      openOnClick: false
                  }
              },
              tabs: [{
                  id: "home",
                  text: "HOME",
                  groups: [{
                      text: "New",
                      alignType: ej.Ribbon.AlignType.Rows,
                      type: "custom",
                      contentID: "btn"
                  }]
              }]
          });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // hide the given text tab item in the ribbon control.
        ribbonObj.hideTab("HOME");
            </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        $("#Ribbon").ejRibbon("hideTab", "HOME");
        </script>

    isEnable(text)

    Checks whether the given text tab in the ribbon control is enabled or not.

    Name Type Description
    text string text of the tab item.

    Returns:

    boolean

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        //  To check given text tab in the ribbon control is enabled or not.
        ribbonObj.isEnable("HOME");
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
          $("#Ribbon").ejRibbon({
              // Set the width during initialization.         
              width: "100%",
              applicationTab: {
                  type: ej.Ribbon.ApplicationTabType.Menu,
                  menuItemID: "menu",
                  menuSettings: {
                      openOnClick: false
                  }
              },
              tabs: [{
                  id: "home",
                  text: "HOME",
                  groups: [{
                      text: "New",
                      alignType: ej.Ribbon.AlignType.Rows,
                      type: "custom",
                      contentID: "btn"
                  }]
              }]
          });
        });
        $("#Ribbon").ejRibbon("isEnable", "HOME");
        </script>

    isVisible(text)

    Checks whether the given text tab in the ribbon control is visible or not.

    Name Type Description
    text string text of the tab item.

    Returns:

    boolean

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        //  To check given text tab in the ribbon control is visible or not.
        ribbonObj.isVisible("HOME");
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">  
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        $("#Ribbon").ejRibbon("isVisible", "HOME");
        </script>

    removeTab(index)

    Removes the given index tab item from the ribbon control.

    Name Type Description
    index number index of tab item.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Remove the given index tab item from the ribbon control.
        ribbonObj.removeTab(1);
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        $("#Ribbon").ejRibbon("removeTab", 1); 
        </script>

    setTabText(tabText, newText)

    Sets new text to the given text tab in the ribbon control.

    Name Type Description
    tabText string current text of the tab item.
    newText string new text of the tab item.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // Set new text to the given text tab in the ribbon control.
        ribbonObj.setTabText("HOME", "NEW");
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        $("#Ribbon").ejRibbon("setTabText", "HOME", "NEW");
        </script>

    showBackstage()

    Displays the ribbon backstage page.

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
         //initialize the Ribbon object
          var ribbonObj = $("#Ribbon").data("ejRibbon");
         // show the ribbon backstage page.
          ribbonObj.showBackstage();
        </script>
  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }]
            });
        });    
        $("#Ribbon").ejRibbon("showBackstage");
        </script>

    showTab(text)

    Displays the given text tab in the ribbon control.

    Name Type Description
    text string text of the tab item.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }]
        });
        });
        //initialize the ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // hide the given text tab item in the ribbon control.
        ribbonObj.showTab("HOME");
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }]
         });
        });
        $("#Ribbon").ejRibbon("showTab", "HOME");
        </script>

    updateGroup(tabIndex, groupId, [contentGroup])

    To customize Group alone in the inside content.

    Name Type Description
    tabIndex number ribbon tab index.
    groupId string group id to be displayed in ribbon tab .
    contentGroup object contentGroup is used in the object

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
        </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "700px",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "One",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "one",
                                text: "one"
                            }, {
                                id: "two",
                                text: "two"
    
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }]
            });
        });
        var ribbonGroup =
             {
               text: "new one "
              };
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        ribbonObj.updateGroup(1, one, ribbonGroup);
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
        </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "700px",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "One",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "one",
                                text: "one"
                            }, {
                                id: "two",
                                text: "two"
    
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }]
            });
        });
        var ribbonGroup =
             {
               text: "new one "
              };
        $("#Ribbon").ejRibbon("updateGroup",1, "one", ribbonGroup);
        </script>

    updateBackStageItem(index,[item])

    Update option in existing Backstage.

    Name Type Description
    index number index to the backstage item
    item object select the object to add the backstage item

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var updateBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
        $("#Ribbon").ejRibbon("updateBackStageItem",1,updateBackStage);
        </script>
  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var updateBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        ribbonObj.updateBackStageItem(1,updateBackStage);
        </script>

    removeTabGroupContent(tabIndex, groupText, [contentIndex], [subGroupIndex])

    To customize whole content from Tab Group.

    Name Type Description
    tabIndex number ribbon tab index.
    groupText string ribbon group text.
    contentIndex number ribbon content index. This is optional. If the value is not given, all content groups will be removed.
    subGroupIndex number sub group index in the ribbon group. This is optional. If the value is not given, all content groups will be removed.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
        </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "700px",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "One",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "one",
                                text: "one"
                            }, {
                                id: "two",
                                text: "two"
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }]
            });
        });
        $("#Ribbon").ejRibbon("removeTabGroupContent",1,"One",0,1);
        </script>
  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save as</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
        </ul>
        <div id="Ribbon"></div>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                // Set the width during initialization.         
                width: "700px",
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "menu",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "One",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "one",
                                text: "one"
                            }, {
                                id: "two",
                                text: "two"
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                width: 60,
                                height: 70
                            }
                        }]
                    }]
                }]
            });
        });
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // remove tab group content in the ribbon 
        ribbonObj.removeTabGroupContent(1, "One", 0, 1);
        </script>

    removeBackStageItem(index)

    Remove option from Backstage.

    Name Type Description
    index number index to the backstage item

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var removeBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
        //initialize the Ribbon object
        var ribbonObj = $("#Ribbon").data("ejRibbon");
        // remove backstage item in the ribbon 
        ribbonObj.removeBackStageItem(1);
        </script>
  • HTML
  • <div id="content1">
        <ul style="list-style: none">
            <div style="margin-left: 30px; font-size: 20px">Open</div>
            <li>Recent Workbooks</li>
            <li>Computer</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">
        $(function () {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "open",
                            text: "Open",
                            contentID: "content1"
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
    
            });
        });
        var removeBackStage =
                        {
                            id: "File",
                            text: "File",
                            itemType: ej.Ribbon.ItemType.Tab
                        }
        $("#Ribbon").ejRibbon("removeBackStageItem",1);
        </script>

    Events

    beforeTabRemove

    Triggered before the ribbon tab item is removed.

    Name Type Description
    argument Object Event parameters from button.
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    index number returns current tab item index in the ribbon control.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            beforeTabRemove: function(args) {}
        });
        });
        </script>

    create

    Triggered before the ribbon control is created.

    Name Type Description
    argument Object Event parameters from Ribbon.
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             create: function(args) {}
         });
        });  
        </script>

    destroy

    Triggered before the ribbon control is destroyed.

    Name Type Description
    argument Object Event parameters from button.
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    deleteIndex number returns current ribbon tab item index

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             destroy: function(args) {}
         });
        });           
        </script>

    groupClick

    Triggered when the control in the group is clicked successfully.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    target number returns the control clicked in the group.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             groupClick: function(args) {}
         });
        });  
        </script>

    groupExpand

    Triggered when the group expander in the group is clicked successfully.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    target number returns the clicked group expander.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            groupExpand: function(args) {}
        });
        });      
        </script>

    galleryItemClick

    Triggered when an item in the Gallery control is clicked successfully.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    galleryModel object returns the gallery model.
    type string returns the name of the event.
    target number returns the item clicked in the gallery.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
    
                     text: "Gallery",
                     alignType: ej.Ribbon.AlignType.Rows,
                     content: [{
                         groups: [{
                             id: "Gallery",
                             columns: 3,
                             itemHeight: 65,
                             itemWidth: 68,
                             expandedColumns: 4,
                             type: ej.Ribbon.type.gallery,
                             galleryItems: [{
                                 text: "Content1",
                                 toolTip: "GalleryContent1"
                             }, {
                                 text: "Content2",
                                 toolTip: "GalleryContent2"
                             }, {
                                 text: "Content3",
                                 toolTip: "GalleryContent3"
                             }, {
                                 text: "Content4",
                                 toolTip: "GalleryContent4"
                             }, {
                                 text: "Content5",
                                 toolTip: "GalleryContent5"
                             }, {
                                 text: "Content6",
                                 toolTip: "GalleryContent6"
                             }],
                             customGalleryItems: [{
                                 customItemType: ej.Ribbon.customItemType.menu,
                                 menuId: "customMenu",
                                 menuSettings: {
                                     openOnClick: false
                                 }
                             }, {
                                 text: "Save Selection as new quick style",
    
                                 customItemType: ej.Ribbon.customItemType.button,
                                 buttonSettings: {
                                     cssClass: "e-extrabtnstyle"
                                 }
                             }]
                         }]
                     }]
                 }]
             }],
             galleryItemClick: function(args) {}
         });
        });   
        </script>

    backstageItemClick

    Triggered when a tab or button in the backstage page is clicked successfully.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    target number returns the item clicked in the gallery.
    id string returns the id of the target item.
    text string returns the text of the target item.

    Example

  • HTML
  • <div id="content1">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Info</div>
        <li>Protect Workbook</li>
        <li>Inspect Workbook</li>
        <li>Versions</li>
        <li>Browser View Options</li>
        </ul>
        </div>
        <div id="content2">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Open</div>
        <li>Recent Workbooks</li>
        <li>Computer</li>
        </ul>
        </div>
        <div id="content3">
        <ul style="list-style:none"><div style="margin-left:30px;font-size:20px">Export</div>
        <li>Create PDF/XPS Document</li>
        <li>Change File Type</li>
        </ul>
        </div>
        <div id="Ribbon"></div>
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "500px",
                applicationTab: {
                     type: ej.Ribbon.ApplicationTabType.Backstage,
                    backstageSettings: {
                        text: "FILE",
                        height: 250,
                        width: 600,
                        headerWidth: 125,
                        pages: [{
                            id: "info",
                            text: "Info",
                            itemType: ej.Ribbon.itemType.tab,
                            contentID: "content1"
                        }, {
                            id: "open",
                            text: "Open",
                            contentID: "content2"
                        }, {
                            id: "export",
                            text: "Export",
                            contentID: "content3",
                            enableSeparator: true
                        }, {
                            id: "exit",
                            text: "Exit",
                            itemType: ej.Ribbon.itemType.button
                        }]
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "New",
                        alignType: ej.Ribbon.AlignType.Rows,
                        type: "custom",
                        contentID: "btn"
                    }]
                }],
            backstageItemClick : function (args) {}
            });
        });   
        </script>

    collapse

    Triggered when the ribbon control is collapsed.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             collapse: function(args) {}
         });
        });  
        </script>

    expand

    Triggered when the ribbon control is expanded.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             expand: function(args) {}
         });
        });       
        </script>

    load

    Triggered before the ribbon control is load.

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             load: function(args) {}
         });
        });       
        </script>

    tabAdd

    Triggered after adding the new ribbon tab item.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    tabHeader object returns new added tab header.
    tabContent object returns new added tab content panel.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             tabAdd: function(args) {}
         });
        });
        </script>

    tabClick

    Triggered when tab is clicked successfully in the ribbon control.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    prevActiveHeader object returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader object returns current active tab header .
    activeIndex number returns current active index.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             tabClick: function(args) {}
         });
        });
        </script>

    tabCreate

    Triggered before the ribbon tab is created.

    Name Type Description
    argument Object Event parameters from button.
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    deleteIndex number returns current ribbon tab item index

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            tabCreate: function(args) {}
        });
        });   
        </script>

    tabRemove

    Triggered after the tab item is removed from the ribbon control.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    removedIndex number returns the removed index.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
         $("#Ribbon").ejRibbon({
             // Set the width during initialization.         
             width: "100%",
             applicationTab: {
                 type: ej.Ribbon.ApplicationTabType.Menu,
                 menuItemID: "menu",
                 menuSettings: {
                     openOnClick: false
                 }
             },
             tabs: [{
                 id: "home",
                 text: "HOME",
                 groups: [{
                     text: "New",
                     alignType: ej.Ribbon.AlignType.Rows,
                     type: "custom",
                     contentID: "btn"
                 }]
             }],
             tabRemove: function(args) {}
         });
        });       
        </script>

    tabSelect

    Triggered after the ribbon tab item is selected in the ribbon control.

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    prevActiveHeader object returns previous active tab header.
    prevActiveIndex number returns previous active index.
    activeHeader object returns current active tab header .
    activeIndex number returns current active index.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
        $("#Ribbon").ejRibbon({
            // Set the width during initialization.         
            width: "100%",
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuItemID: "menu",
                menuSettings: {
                    openOnClick: false
                }
            },
            tabs: [{
                id: "home",
                text: "HOME",
                groups: [{
                    text: "New",
                    alignType: ej.Ribbon.AlignType.Rows,
                    type: "custom",
                    contentID: "btn"
                }]
            }],
            tabSelect: function(args) {}
        });
        });      
        </script>

    toggleButtonClick

    Triggered when the expand/collapse button is clicked successfully .

    Name Type Description
    cancel boolean Set to true when the event has to be canceled, else false.
    model object returns the ribbon model.
    type string returns the name of the event.
    target number returns the expand/collapse button.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
          $("#Ribbon").ejRibbon({
              // Set the width during initialization.         
              width: "100%",
              applicationTab: {
                  type: ej.Ribbon.ApplicationTabType.Menu,
                  menuItemID: "menu",
                  menuSettings: {
                      openOnClick: false
                  }
              },
              tabs: [{
                  id: "home",
                  text: "HOME",
                  groups: [{
                      text: "New",
                      alignType: ej.Ribbon.AlignType.Rows,
                      type: "custom",
                      contentID: "btn"
                  }]
              }],
              toggleButtonClick: function(args) {}
          });
        });
        </script>

    qatMenuItemClick

    Triggered when the QAT menu item is clicked successfully .

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the ribbon model.
    type string returns the name of the event.
    text string returns the clicked menu item text.

    Example

  • HTML
  • <ul id="menu">
        <li><a>FILE </a>
        <ul>
        <li><a>New</a></li>
        <li><a>Open</a></li>
        <li><a>Save</a></li>
        <li><a>Save as</a></li>
        <li><a>Print</a></li>
        </ul></li></ul>
        <div id="Ribbon"></div> 
        <button id="btn">Home button</button>
        <script type="text/javascript">   
        $(function() {
            $("#Ribbon").ejRibbon({
                width: "100%",
                showQAT: true,
                applicationTab: {
                    type: ej.Ribbon.ApplicationTabType.Menu,
                    menuItemID: "ribbon",
                    menuSettings: {
                        openOnClick: false
                    }
                },
                tabs: [{
                    id: "home",
                    text: "HOME",
                    groups: [{
                        text: "Font",
                        alignType: ej.Ribbon.AlignType.Rows,
                        content: [{
                            groups: [{
                                id: "bold",
                                text: "Bold",
                                quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    prefixIcon: "e-ribbon bold"
                                }
                            }, {
                                id: "italic",
                                text: "Italic",
                                quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    prefixIcon: "e-ribbon e-ribbonitalic"
                                }
                            }, {
                                id: "underline",
                                text: "Underline",
                                quickAccessMode: ej.Ribbon.QuickAccessMode.ToolBar,
                                buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    prefixIcon: "e-ribbon e-ribbonunderline"
                                }
                            }],
                            defaults: {
                                type: ej.Ribbon.Type.Button,
                                height: 30
                            }
                        }]
                    }]
                }],
                qatMenuItemClick: function(args) {}
            });
        });
        </script>