Button suffixIcon

[Irvin Dominin]

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]

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]

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]

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