How do I intercept the switch's event handlers?

[Larisa]

Hi,

What is the recommended way to intercept the switch's event handlers?

I'd like a confirmation dialog to appear whenever the user clicks the switch, and change the switch value only after the user confirms 'yes'. So the first step is for me to intercept the default click behavior for the switch.

Here's what I tried:

<div id='switch-section'>
    <input type='checkbox' />
</div>

$('#switch-section input').kendoMobileSwitch();
var switch = $('#switch-section .km-switch');
switch.on('click', function (e) {
    console.log('click');
    e.preventDefault();
    return false;
}

When I click the switch, this prints the expected message to the console. However, I also expected this to prevent the switch from changing value, but that is not the case.

[Larisa]

I could set the 'pointer-events' CSS property to 'none' for the .km-switch element, and then programmatically toggle the switch, but was wondering if there's a better way.

[Ianko]

Hello Larisa,

 

You can use the change event and modify the state with the check method of the switch based on the results of the confirm dialog. Here you are an example of that: http://dojo.telerik.com/EXIpA. 

 

Regards,
Ianko
Telerik by Progress