MVC Grid Double click update dupes record

2 posts, 0 answers
  1. Scott Singleton
    Scott Singleton avatar
    2 posts
    Member since:
    Jul 2009

    Posted 27 Apr 2016 Link to this post

    I've been buggered by this all day today.

    I've got a Kendo grid in an MVC razor page running in AJAX mode with create and update actions calling a controller.

    I've also got click-happy users that want to double-click the "update" button and are causing duplicate calls to the data service.  I've tried various things, including disabling the buttons on RequestStart and RequestEnd but a double click continually reposts data.

    The following code disables both the update and cancel button.  inserting the k-state-disabled class and removing the action class replacing it with a dummy class.  When the data request is done the classes are restored.

    Is there a better solution than this:


      .Events(events => events.Error("onValidationError"))
                          .Events(events => events.RequestStart("prs_RequestStart"))
                          .Events(events => events.RequestEnd("prs_RequestEnd"))
                          .Read(read => read.Action("ReadCreateProductVMs", "API", new { id = Model.Id }))
                          .Create(create => create.Action("CreateProductVM", "API"))
                          .Update(update => update.Action("UpdateProductVM", "API"))
    function prs_RequestStart(e) {
        var grid = $("#Grid");
    function prs_RequestEnd(e) {
        var grid = $("Grid");

  2. Konstantin Dikov
    Konstantin Dikov avatar
    2120 posts

    Posted 29 Apr 2016 Link to this post

    Hi Scott,

    Thank you for contacting us.

    There are few options that could be used for preventing the multiple requests on double click of the users, and the one that you have found is one of them. I personally would prefer to handle the "Edit" event of the Grid and get reference to the buttons from the e.container and attach handler for the click event, where I could disable the button and prevent further clicks:
    function edit(e) {
        e.container.find(".k-grid-update").click(function (e) {

    Another option would be to display an element over the Grid within the click event of the buttons and hide it within the "DataBound" or "Cancel" events, but disabling the buttons seems an easier solution.

    If any other questions arise on this matter, please do not hesitate to contact us again.

    Konstantin Dikov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top