Double-click prevention

5 posts, 1 answers
  1. John
    John avatar
    3 posts
    Member since:
    Feb 2017

    Posted 20 Oct 2017 Link to this post

    I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onSave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.

    The problem: onSave1 fails 1 time in 100 (I think, its proving very difficult to test). It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?

    Is onSave2 any better?

    onSave1: function (e) {
        $(event.srcElement)
        .addClass("k-state-disabled")
        .bind("click", disable = function (e) { e.preventDefault(); return false; })
        this.dataSource.one("requestEnd", function () {
            $("[data-role=window] .k-grid-update").off("click", disable).removeClass("k-state-disabled");
        })
    }

            
    onSave2: function (e) {    
        $(event.srcElement).removeClass(".k-grid-update").addClass("k-state-disabled").addClass("disabledMarker");
        this.dataSource.one("requestEnd", function () {
            $("[data-role=window] .disabledMarker").addClass(".k-grid-update").removeClass("k-state-disabled").removeClass("disabledMarker");
        })
    }
  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 24 Oct 2017 Link to this post

    Hello, John,

    Thank you for the provided information.

    In this scenario, I can suggest the following approach.

    1) on the onSave1 to add the "k-state-disabled" class and to remove the "k-grid-update" as this is the class for which the event listener is attached. This will not interfere with the button appearance.

    2) Then on the request end event, the remove the "k-state-disabled" and to add the k-grid-update class.

    I hope this approach to prove helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    3 posts
    Member since:
    Feb 2017

    Posted 24 Oct 2017 in reply to Stefan Link to this post

    Thanks for reply - I believe that's what onSave2() was suggesting, its good to know there is a reason behind it. Also should it be removeClass(".k-grid-update") or removeClass("k-grid-update"), when I was experimenting I think i found the '.' was significant?
  4. John
    John avatar
    3 posts
    Member since:
    Feb 2017

    Posted 25 Oct 2017 in reply to John Link to this post

    revised onSave2() - the extra . was an error
    onSave2: function (e) {   
        $(event.srcElement).removeClass("k-grid-update").addClass("k-state-disabled").addClass("disabledMarker");
        this.dataSource.one("requestEnd", function () {
            $("[data-role=window] .disabledMarker").addClass("k-grid-update").removeClass("k-state-disabled").removeClass("disabledMarker");
        })
    }
  5. Answer
    Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 25 Oct 2017 Link to this post

    Hello, John,

    The dot "." is needed when a class selector is used with jQuery.

    With the removeClass and addClass methods is it not needed, as the method are used specifically for classes and the class indicator is not needed.

    I hope the revisited onSave2 is working as expected now.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top