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

Custom icons

Hello,

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

Thanks!

4 Replies

AP Arun Palaniyandi Syncfusion Team February 3, 2016 11:23 AM UTC

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



JP Jorge Pampin February 3, 2016 03:55 PM UTC

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!


AP Arun Palaniyandi Syncfusion Team February 4, 2016 12:40 PM UTC

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



JP Jorge Pampin February 4, 2016 03:20 PM UTC

Perfect! Thanks!

Loader.
Live Chat Icon For mobile
Up arrow icon