A duplicated record created if if user double clicks on Insert button of the ASP.Net hierarchical grid

[Mircea]

Using ASP.Net hierarchical grid, version 2022.2

Scenario: 

User is creating a new child record and attempts to save it. However, instead of just clicking the Save button, user double-clicks on it.

Result:

INSERT command gets fired twice and two duplicated child records are created, with different ID's.

This issue is very easy to reproduce. How to avoid it? 

Regards.

[Attila Antal]

Hello Mircea,

You can enable AJAX for the Grid with a Loading panel. As soon as you have clicked the save button, the loading panel will show up covering the entire Grid as a result preventing further clicks.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="600"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
</telerik:RadGrid>

 

 

UPDATE

 

Another easy way to prevent double-clicking on the Insert/Update buttons is by using an EditForm Template. Within the template, you can use RadButton for Insert/Update commands and set its SingleClick  (Single Click Button) property to false. This, however, requires that you create the entire layout for editing/inserting.

<EditFormSettings EditFormType="Template">
    <FormTemplate>

        <%--Create a custom layout with your own Form Controls to Insert/Update--%>

        <%--The Insert/Update/Cancel buttons--%>
        <telerik:RadButton runat="server" ID="RadButton1" 
            Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update"  %>' 
            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update"  %>' AutoPostBack="true" SingleClick="true" />

        <telerik:RadButton runat="server" ID="RadButton2" Text="Cancel" CommandName="Cancel" AutoPostBack="true" />
    </FormTemplate>
</EditFormSettings>

 

 

If you'd rather skip creating a completely new EditForm layout and avoid using AJAX, perhaps this option would fit you better.

Using the GridCreated client-event, you can attach a click event listener to all Insert/Update buttons that are rendered, and when they are clicked, show an AjaxPanel explicitly

Example

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <ClientEvents OnGridCreated="OnGridCreated" />
    </ClientSettings>
</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>

<script>
    function OnGridCreated(sender, args) {
        var $updateButtons = $telerik.$(sender.get_element()).find('.rgEditForm .rgActionButton.rgUpdate, .rgEditRow .rgActionButton.rgUpdate');

        $updateButtons.each(function(index, button) {
            $telerik.$(this).on('click', function(e) {
                var ajaxLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
                ajaxLoadingPanel.show(sender.get_id());
            })
        })
    }
</script>

Note: This will work with the EditModes EditForms, PopUp, and InPlace.

Regards,
Attila Antal
Progress Telerik

[Mircea]

 

Thank you Attila, I added the code you suggested, it works however...... I would like it to work only when saving and updating a record (clicking on Save button), not when I edit a record. Please advise if possible.

Please also modify the following line of code in your initial response to set DefaultLoadingPanel property

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

[Attila Antal]

Hi Mircea,

I have updated my initial answer with two more scenarios. I hope they will help achieve what you are looking for.

[Mircea]

Thank you Attila for your help, this issue is resolved.

Regards

[Attila Antal]

Thanks for confirming it back. I have marked my answer. 

Happy coding!