Change Event does not trigger for switch control

[Adam Eldred]

Hello,

I have several switch controls being dynamically created in a grid.  these work correctly and pull data values as expected.  However, now I am attempting to bind to their change event and getting odd results:

function LogInChange(e) {

    const t = e.id;

}

...

queryCellInfo(args) {

    var targEle1;

    var switchComp;

    if (args.column.field === 'IsLoggedIn') {

        targEle1 = args.cell.querySelector('.LogInChk');

        switchComp = new ej.buttons.Switch({ checked: args.data[args.column.field], change: LogInChange(targEle1) });

        switchComp.appendTo(targEle1);

    }

The LogInChange function fires once for each switch at page load with expected values, but never fires when the switch is actually clicked.  I have tried a number of alternatives such as binding to the input controls directly with jquery .on and still cant seem to get things to trigger.  

Am I missing something here?

Thanks!

[Shanmugaraja K]

Hi Adam, 

Thank you for contacting Syncfusion support. 

We have checked your provided code example. We would like to let you know that, the change event can be mapped with the function name. You can get the target element from arguments(changeArgs) of LogInChange function instead of passing it as parameter, which will resolve your reported issue. Please refer the below code example. 

 

[JS] 

 

function queryCellInfo(args) { 

    var targEle1; 

    var switchComp; 

    if (args.column.field === 'IsLoggedIn') { 

        targEle1 = args.cell.querySelector('.LogInChk'); 

        switchComp = new ej.buttons.Switch({ checked: args.data[args.column.field], change: LogInChange }); 

        switchComp.appendTo(targEle1); 

    } 

} 

 

function LogInChange(changeArgs) { 

    var target = changeArgs.event.currentTarget; // To get the target element 

    const t = changeArgs.id; 

} 

Regards, 

Shanmugaraja K 

[Adam Eldred]

This does seem to work, though it targets the wrapper instead of the input as I would have assumed.  What is the correct way to programatically set the checked value of the switch?  I see examples of this for EJ1, but nothing showing in the API documentation of EJ2.  Basically I want this for the switch:

$("#check1").ejCheckBox({checked:true});

[Adam Eldred]

Think I pieced this together from some other forum posts:

document.getElementById(CheckBoxID).ej2_instances[0].checked = status

Any cleaner method of accessing these control properties or is .ej2_instances[0] the proper method?

[Shanmugaraja K]

Hi Adam, 

Thank you for your update. 

Query #1: What is the correct way to programmatically set the checked value of the Switch? 

 

We would like to let you know that we can set the checked value of the Switch using checked property by the following code example.  

 

[JS] 

 

 

// Initialize Switch component with checked state. 

var switchObj = new ej.buttons.Switch({ checked: true }); 

And you can refer the documentation from the below link, 

https://ej2.syncfusion.com/documentation/switch/getting-started.html?lang=es5#add-switch-to-the-project 

Query #2: Any cleaner method for accessing these control properties? 

We can access the control properties by getting the control instance using the built-in method `getComponent()` from the base library. Please refer the below code example. 

 

[JS] 

 

 

// To get control instance 

// ej.base.getComponent(HTMLElement, Control Name) 

var instance = ej.base.getComponent(document.querySelector("#checkbox"), "checkbox"); 

 

// To access control properties 

instance.checked = status 

 

Regards, 

Shanmugaraja K 

[Thorsten Arnold]

Hello,

but setting the checked state as you described here, does not fire the change event. However, using function toggle() of the component the event is fired. But I would like to set a specific state depending on the program's state and not just to toggle the value. So why does the component not fire the changed event when setting the checked value programmatically?

Regards

Thorsten

[Aravinthan Seetharaman]

Hi Thorsten, 

 

We have checked your query. The change event will not trigger while changing the Switch state programmatically, it tiggers only on UI interaction. So, we need to call the change event manually while changing the state programmatically. please refer the below code snippet. 

 

 

<ejs-switch id="checked" checked="true" change="change"></ejs-switch> 

             

<button id="btn" class="e-btn">Change State</button> 

 

 

<script> 

    function change() { 

        alert("State Changed"); 

    } 

    document.getElementById("btn").addEventListener("click", function () { 

        var switchObj = document.getElementById("checked").ej2_instances[0]; 

        switchObj.checked = !switchObj.checked; 

        switchObj.change({ checked: switchObj.checked }); 

    }); 

</script> 

 

 

For your reference we have prepared sample here. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/138816/ze/Switch_Chane_Button-2024337730  

 

Please let us know if you have any concern on this. 

 

Regards, 

Aravinthan S