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

Button suffixIcon

Thread ID:

Created:

Updated:

Platform:

Replies:

117943 Jan 12,2015 08:26 AM UTC Jan 13,2015 09:03 AM UTC JavaScript 3
loading
Tags: ejButton
Irvin Dominin
Asked On January 12, 2015 08:26 AM UTC

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

Kaliswaran Shanmuga Sundaram [Syncfusion]
Replied On 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


Irvin Dominin
Replied On 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?


Kaliswaran Shanmuga Sundaram [Syncfusion]
Replied On 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

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.

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

;