MVC Grid Double click update dupes record

[Scott Singleton]

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:

 

.DataSource(ds=>ds
  .Ajax()
  //Brevity
  .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"))
                  ))

<script>
function prs_RequestStart(e) {
    var grid = $("#Grid");
    grid.find(".k-grid-update").addClass("k-state-disabled").addClass("qmims-noUpdate").removeClass(".k-grid-update");
    grid.find(".k-grid-cancel").addClass("k-state-disabled").addClass("qmims-noCancel").removeClass(".k-grid-cancel");
}

function prs_RequestEnd(e) {
    var grid = $("Grid");
    grid.find(".k-grid-noUpdate").removeClass("k-state-disabled").removeClass("qmims-noUpdate").addClass("k-grid-update");
    grid.find(".k-grid-noCancel").removeClass("k-state-disabled").removeClass("qmims-noCancel").addClass("k-grid-cancel");
}

</script>

[Konstantin Dikov]

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) {
        $(this).addClass("k-state-disabled").removeClass(".k-grid-update");
    });
}

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.


Regards,
Konstantin Dikov
Telerik