How to

30 Sep 20196 minutes to read

Get Ribbon object

After Ribbon initialization, Ribbon object is stored in a container element of Ribbon. To access Ribbon object, you can use the following code example.

  • JS
  • var ribbonObject = $("#Ribbon").ejRibbon("instance");
    var ribbonObject = $("#Ribbon").data("ejRibbon");

    Insert own image in Ribbon

    Own images can be inserted in Ribbon by rendering button with “TextAndImage” or “Image” contentType with required icon classes. Refer to the following code example.

  • HTML
  • <ej:Ribbon ID="Ribbon1" runat="server" Width="100%">
                 <ApplicationTab MenuItemID="menu" Type="Menu">
                        <MenuSettings OpenOnClick="false"></MenuSettings>               
                             <ej:RibbonTab ID="Home" Text="Home">
                                        <ej:TabGroup ID="Tab" Text="Alignment" AlignType="Rows">
                                                         <ej:ContentGroup Id="Dos" Text="dossier">
                                                            <ButtonSettings ContentType="TextAndImage" PrefixIcon="e-icon .e-dos"  Type="Button" />
                                                        <ej:ContentGroup Id="Act" Text="acties">
                                                            <ButtonSettings ContentType="TextAndImage" PrefixIcon=" e-icon .e-act" Type="Button" />

    Add required background image for this icon class

  • CSS
  • .e-dos{
                background-image: url("../Content/ej/web/common-images/ribbon/User.jpg");
                height: 32px;
                width: 32px;
                background-image: url("../Content/ej/web/common-images/ribbon/Version.png");
                height: 32px;
                width: 32px;

    Sample can be downloaded here