How to

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");
    
    [or]
    
    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>               
                     </ApplicationTab>
                     <RibbonTabs>
                             <ej:RibbonTab ID="Home" Text="Home">
                                 <tabgroupcollection>
                                        <ej:TabGroup ID="Tab" Text="Alignment" AlignType="Rows">
                                            <contentcollection>
                                                <ej:TabContent>
                                                    <ContentGroupCollection>
                                                         <ej:ContentGroup Id="Dos" Text="dossier">
                                                            <ButtonSettings ContentType="TextAndImage" PrefixIcon="e-icon .e-dos"  Type="Button" />
                                                        </ej:ContentGroup>
                                                        <ej:ContentGroup Id="Act" Text="acties">
                                                            <ButtonSettings ContentType="TextAndImage" PrefixIcon=" e-icon .e-act" Type="Button" />
                                                        </ej:ContentGroup>
                                                    </ContentGroupCollection>
                                                </ej:TabContent>
                                            </contentcollection>
                                        </ej:TabGroup>
                                 </tabgroupcollection>
                            </ej:RibbonTab>
                     </RibbonTabs>
            </ej:Ribbon>

    Add required background image for this icon class

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

    Sample can be downloaded here