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

Custom icons

Thread ID:

Created:

Updated:

Platform:

Replies:

121869 Feb 2,2016 01:22 PM UTC Feb 4,2016 03:20 PM UTC ASP.NET Web Forms 4
loading
Tags: ToggleButton
Jorge Pampin
Asked On February 2, 2016 01:22 PM UTC

Hello,

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

Thanks!

Arun Palaniyandi [Syncfusion]
Replied On 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


Jorge Pampin
Replied On 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!

Arun Palaniyandi [Syncfusion]
Replied On 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


Jorge Pampin
Replied On February 4, 2016 03:20 PM UTC

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.

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

;