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
close icon

Button suffixIcon

Good morning,

I need to display a suffix icon on the right of a button, for this purpose I set a suffixIcon and a contentType like:
                var $button1 = $('#button1');

                var buttonText = 'button1';
                var contentType = ej.ContentType.TextAndImage;
                var suffixIcon = 'e-down-arrow';

                $button1.text(buttonText)
                       .ejButton({
                           contentType: contentType,
                           suffixIcon: suffixIcon,
                           width: '100px'
                       });

but is not working as attended; the only way I found is to set contentType, imagePosition and prefixIcon:
var $button2 = $('#button2');

                var buttonText = 'button2';
                var contentType = ej.ContentType.TextAndImage;
                var imagePosition = ej.ImagePosition.ImageRight;
                var suffixIcon = 'e-down-arrow';

                $button2.text(buttonText)
                       .ejButton({
                           contentType: contentType,
  imagePosition: imagePosition,
                           prefixIcon: suffixIcon,
                           width: '100px'
                       });


and is working; but I want to set so suffix, looking the code I'm a little puzzled.

In the attachment there is a sample.

Kind regards,
Irvin Dominin

Attachment: ButtonSuffixSample_91322693.zip

3 Replies

KS Kaliswaran Shanmuga Sundaram Syncfusion Team January 12, 2015 12:33 PM UTC

Hi Irvin,

Thanks for using Syncfusion products.

Query: I need to display a suffix icon on the right of a button, when I set suffixIcon it is not working as expected.

We would like to inform you that, “suffixIcon” API works only if the value of “contentType” API is set as “ej.ContentType. ImageTextImage” or “ej.ContentType. ImageBoth”. The “suffixIcon” API is used to set the secondary icon for button.

On analyzing the provided sample it is found that, you have used the “suffixIcon” API when the “contentType” API is set to “ej.ContentType.TextAndImage”. So, the image was not displayed in your sample.

We have made the above mentioned changes in your sample and re-attached it in the following location.

Sample: Sample

Also if you want to know more about our components to getting started, please find the below link.

http://help.syncfusion.com/web

In order to know more detailed information please refer the below link which includes all the details to get started with our components.

http://help.syncfusion.com/cr/js

Also you can find all the samples of our components in the following link location.

http://js.syncfusion.com/demos/web/

If still you face any difficulties in setting the image on the right of a button, please get back to us we will be happy to assist you.

Regards,

Kaliswaran S



ID Irvin Dominin January 12, 2015 01:34 PM UTC

Ok, got it.

But if I need to display only a suffix icon (without any space for the prefix) is this the correct code?

Code:
                var buttonText = 'button2';
                var contentType = ej.ContentType.TextAndImage;
                var imagePosition = ej.ImagePosition.ImageRight;
                var suffixIcon = 'e-down-arrow';

                $button2.text(buttonText)
                       .ejButton({
                           contentType: contentType,
   imagePosition: imagePosition,
                           prefixIcon: suffixIcon,
                           width: '100px'
                       });

or there is a better way to define an ejButton with only a suffix icon?



KS Kaliswaran Shanmuga Sundaram Syncfusion Team January 13, 2015 09:03 AM UTC

Hi Irvin,

Thanks for your update.

Query: I need to display only a suffix icon (without any space for the prefix). There is a better way to define an ejButton with only a suffix icon?

Yes, the code that you have mentioned in your query is the better way to define the ejButton with suffix icon and there is no any other stuff to define the ejButton with suffix icon.

Please let us know if you have any queries.

Regards,

Kaliswaran S

Loader.
Live Chat Icon For mobile
Up arrow icon