Custom icons

[Jorge Pampin]

Hello,

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

Thanks!

[Arun Palaniyandi]

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]

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]

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]

Perfect! Thanks!