We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Can't get split-button or button working

Thread ID:

Created:

Updated:

Platform:

Replies:

132949 Sep 29,2017 03:57 PM Oct 2,2017 06:44 AM Aurelia 1
loading
Tags: ejRibbon
dan
Asked On September 29, 2017 04:21 PM

The ribbon is working but the button with menu dropdown is not working. Also the icons are not working I am using e-icon e-iconname.

This is copied from the demo, ClipBoard should have a dropdown menu of paste and the clipboard icon.  Print Layout should have a dropdown menu of print layout text and icon.  This is copied from the Ribbon demo page. 

See attached project
To run
npm install
npm start

The ribbon is in folder src/components/nav-bar.js

Thank you

Attachment: client_baf2f24c.7z

Ashokkumar Balasubramanian [Syncfusion]
Replied On October 2, 2017 06:44 AM

Hi Dan,   
   
Thanks for contacting Syncfusion Support.   
   
We had checked your query and sample. For that sample, you have missed to add the icon css reference for Ribbon component (Icons are not displayed problem) and you didn’t define the corresponding unorder list to the corresponding split button settings tagetID, please refer to the below modified code example.   
   
[App.html]   
   
<require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css"></require>   
  <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require>   
  <require from="syncfusion-javascript/Content/ej/web/ribbon-css/ej.icons.css"></require>   
   
[nav-bar.html]   
   
<div id="Ribbon"></div>   
  <ul id="pasteSplit">   
      <li><a>Paste</a></li>   
  </ul>   
   
[nav-bar.js]   
   
splitButtonSettings: {   
                contentType: ej.ContentType.ImageOnly,   
                prefixIcon: "e-icon e-ribbon e-ribbonpaste",   
                targetID: "pasteSplit",   
                buttonMode: "dropdown",   
                arrowPosition: ej.ArrowPosition.Bottom,   
                click: "executeAction"   
              }   
     
For your convenience, we have modified your provided sample. Please check the modified sample in below location.   
   
Sample.   
   
Please let us know, if the provided information’s are helpful to achieve your requirement or not.   
   
Regards,   
Ashokkumar B.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;