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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't get split-button or button working

Thread ID:





132949 Sep 29,2017 07:57 PM UTC Oct 2,2017 10:44 AM UTC Aurelia 1
Tags: ejRibbon
Asked On September 29, 2017 08:21 PM UTC

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 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.   
<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>   
<div id="Ribbon"></div>   
  <ul id="pasteSplit">   
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.   
Please let us know, if the provided information’s are helpful to achieve your requirement or not.   
Ashokkumar B.  


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon