How do I intercept the switch's event handlers?

3 posts, 0 answers
  1. Larisa
    Larisa avatar
    2 posts
    Member since:
    Feb 2015

    Posted 07 Oct Link to this post

    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.

  2. Larisa
    Larisa avatar
    2 posts
    Member since:
    Feb 2015

    Posted 07 Oct in reply to Larisa Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Oct Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top