Grid Popup editing Save adding duplicate value in grid

[Taha]

Hi,

I am using Grid popup editing to add new entries, i am getting an issue when pressing Save on new add multiple times before popup disappears it adds multiple entries to the grid. Is there a way to disable Save button once a request has been send to server to create new entry so it does not send multiple times new entry.

This Happens on IE8 only


Waiting for response,

Taha Khan 

[Vladimir Iliev]

Hi Taha,

 
You can disable the "Update" button on Save event of the Grid and enable it on RequestEnd or Sync event of the DataSource. Please check the example below:

function onSave(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");
    })
}

 
Kind Regards,
Vladimir Iliev
the Telerik team

[Taha]

Hi Vladimir,

Thanks for your reply it was helpful, but is it possible to know whether model validation failed in requestEnd because it only makes sense to enable save button if model validation failed

[Vladimir Iliev]

Hi Than,

 
Basically in the RequestEnd event you can check if there is "Error" property in the response - please check the example below:

function onRequestEnd(e) {
    if (e.response.Errors) {
        //there is error -> enable the button
    }
}

Kind Regards,
Vladimir Iliev
the Telerik team

[David]

Hi,

We are experiencing the same issue - even with the work around it is possible to post another record to the server by hitting the button twice very quickly. 

Is there any change of fix for this issue in a future release?

Thanks,
David

[Vladimir Iliev]

Hi David,

Please note that the described behavior is not issue, but is intended behavior as the desired behavior is not suitable for all possible scenarios (the developer is responsible for disabling the button if needed). Also you can improve the previous solution by attaching custom "click" event handler directly to the "Update" button on each "Edit" event (instead of using the "Save" event) - this way you will be able to disable the button earlier.

Regards,
Vladimir Iliev
Telerik

 

 

[David]

Hi Vladimir, thanks for that.

If I add a handler to disable the button when it is clicked, then I have a problem when validation fails - as the request end event is never fired and therefor the button stays disabled. Is there an easy way for me to detect that validation has failed and re-enable the button.

I appreciate that this is not always the desired behaviour, but it feels like something that I shouldn't have to work around. I can't imagine many scenarios where you would want the user to be able to click multiple times on the update button and for that to cause multiple items to be added.

 Is there any chance of an option on the grid for this in the future - anything we're adding now with event handling and disabling buttons from those handlers seems like a decent sized workaround for something that we will need on every single grid we implement. 
 
Many thanks

David

[Alexander Popov]

Hello David,

You can use the Grid's save event to disable the Update button as shown in this example. Regarding your question about this being supported out of the box - I would recommend submitting this as a feature request on our feedback portal, where it could be publicly discussed and voted for.

Regards,
Alexander Popov
Telerik