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.
Unfortunately, activation email could not send to your email. Please try again.

Custom icons

Thread ID:

Created:

Updated:

Platform:

Replies:

121869 Feb 2,2016 08:22 AM Feb 4,2016 10:20 AM ASP.NET Web Forms 4
loading
Tags: ToggleButton
Jorge Pampin
Asked On February 2, 2016 08:22 AM

Hello,

How to set my own icon (png file) in a ToggleButton?

Thanks!

Arun Palaniyandi [Syncfusion]
Replied On February 3, 2016 06:23 AM

Hi Jorge,

Thank you for contacting Syncfusion support.

Query:” How to set my own icon (png file) in a ToggleButton?”

Yes, it is possible to set the custom icons for the ToggleButton using the DefaultPrefixIcon and ActivePrefixIcon property. The property DefaultPrefixIcon and ActivePrefixIcon is defined to accept CSS class and we can pass the CSS class which contains all the styles including background-image. Please find the below code snippet.

<code>
[ASPX]

<ej:ToggleButton ID="ToggleButtonNormal" runat="server" Height="25px" DefaultPrefixIcon="default" 

        ActivePrefixIcon="active"  ShowRoundedCorner="true" ContentType="TextAndImage" DefaultText="Play" ActiveText="Stop" ></ej:ToggleButton>



     <style type="text/css">       

         .default

         {

             background: url('../tick-button.png')no-repeat;

         }        

          .active

         {

             background: url('../audio-video-button---record.png')no-repeat;

         }     
         </style>
</code>

For your convenient, we have prepared a sample and the same can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/forum/121869/ze/WebApplication1_(2)176815748


Please let us know if you have further concern.

Regards,

Arun P


Jorge Pampin
Replied On February 3, 2016 10:55 AM

Hello,

If I change the toggleState by javascript, the background of the button doesn't change, what can I do?

 $("#ctl02_BtnOLAPActividades").data("ejToggleButton").model.toggleState = false;

Thansk!

Arun Palaniyandi [Syncfusion]
Replied On February 4, 2016 07:40 AM

Hi Jorge,

Thanks for the update.

Query :” If I change the toggleState by javascript, the background of the button doesn't change, what can I do?”

We suggest you to use the below given code to change the toggle state. Please refer the following code.

<code>

$('#<%=ToggleButton.ClientID%>').data("ejToggleButton").option("toggleState", true);

</code>


Please refer the below links for more details about accessing the control, 
http://help.syncfusion.com/js/api-configuration
http://help.syncfusion.com/js/invoking-methods
http://help.syncfusion.com/js/wiring-events

For your convenient, we have prepared a sample and the same can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/forum/121869/ze/WebApplication1-17312024

Please let us know if you have further concern.

Regards,

Arun P


Jorge Pampin
Replied On February 4, 2016 10:20 AM

Perfect! Thanks!

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.

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.

;