1. Home
  2. Forum
  3. ASP.NET Core
  4. Ribbon toggle-button

Ribbon toggle-button

Hi
I have the follow toggle-button

    <e-content-group id="connect" tool-tip="Connect to APRS Server" type="ToggleButton">
                                                <e-toggle-button-settings click="onConnect" content-type="TextAndImage" default-text="Connect" default-prefix-icon="agw-disconnect" active-text="Disconnect" active-prefix-icon="agw-connect" image-position="ImageTop">
                                                </e-toggle-button-settings>
                                            </e-content-group>

How can i change its state from javascript?
The situation is as follow. When the user clicks opens a modal and the user either continue with the connection or just presses cancel and stays disconnected.
The button when the user click it changes state. I want to set it to unselected when the user clicks Cancel.
Thank you in advance for any help.
George

1 Reply
PK Pradeep Kumar Bose Syncfusion Team January 2, 2017 01:07 PM UTC

Hi George, 
 
Query : When the user clicks opens a modal and the user either continue with the connection or just presses cancel and stays disconnected.  
 
The requested requirement “ Changing toggle button state” can be achieved using toggle button client side event. 

 
//Here you can define toggle button click event ‘onConnect’. 

<e-content-group id="undo" > 
                           <e-toggle-button-settings id="tglbtn" click=" onConnect”  show-rounded-corner="true" default-text="Connect" active-text="Connected" /> 
      </e-content-group> 



//script section for Toggle button state change. 
 
 
<script> 
        function onConnect(e) { 
            var r = confirm("Connect or not");                           
    if (r == false) { 
                this.option('toggleState', false); 
            }  
 } 
</script> 
 
 
You can check the following api documentation link of toggle button. 
 
 

For your convenient we have attached sample. 



Loader.
Up arrow icon