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. Image for the cookie policy date

Can't get split-button or button working

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

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team October 2, 2017 10:44 AM UTC

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.  


Loader.
Live Chat Icon For mobile
Up arrow icon