How To Prevent Double-Clicking of Buttons in Grid Batch Edit

3 posts, 1 answers
  1. Virgil Rodriguez
    Virgil Rodriguez avatar
    82 posts
    Member since:
    Oct 2008

    Posted 23 Oct 2017 Link to this post

    Hi Telerik,

    Eight years ago, I initiated a thread "How To Prevent Double-Clicking Of Any Toolbar Button". I understand that a solution was developed by Telerik four years later here "ADD SingleClick property to the RadToolBar control."

    Has there been any Telerik initiative to implement this on basically any button used anywhere? Because, realistically buttons can be clicked multiple times causing unintended consequences.

    Another case in point are the "Save changes" and "Cancel changes" buttons that appear when Batch Edit is initiated in a RadGrid. I have a the following questions:

    1. how do I access those buttons programmatically
    2. how do I prevent them from being double-clicked

    By the way, I'm using Telerik Version R3 2016.

    Thank you.

    Virgil

  2. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    379 posts

    Posted 31 Oct 2017 Link to this post

    Hi Virgil,

    To reference buttons that are residing in the command item, one option would be to use OnItemCreated event of RadGrid, verify if the item is GridCommandItem, search for the desired control by its ID and perform further actions as needed.

    Protected Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridCommandItem Then
            Dim elasticBtn As ElasticButton = TryCast(e.Item.FindControl("SaveChangesIcon"), ElasticButton)
            '' do something with the button
            '' elasticBtn.Enabled = False
        End If
    End Sub

    In order to prevent second click from the CommandItem buttons, you could use the following client-side method:

    <script type="text/javascript">
        var clickedOnce = false;
        function pageLoad(app, args) {
            alreadyFired = false;
        }
        function gridCommand(sender, args) {
            if (args.get_commandName() == "BatchEdit") {
                if (!clickedOnce) {
                    clickedOnce = true;
                }
                else {
                    args.set_cancel(true);
                }
            }
        }
    </script>

    Also, you can apply some delay in the code behind (in this example we use Thread.Sleep to apply 2 seconds of delay after binding data to grid, thus preventing further actions from client during this period.

    Protected Sub RadGrid1_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs)
        RadGrid1.DataSource = GetGridSource()
        Threading.Thread.Sleep(2000)
    End Sub

    I hope this addresses your concerns.

    Kind Regards,
    Attila Antal
    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. Virgil Rodriguez
    Virgil Rodriguez avatar
    82 posts
    Member since:
    Oct 2008

    Posted 07 Nov 2017 in reply to Attila Antal Link to this post

    Thank you very much Attila! Your advice definitely solved my problem.

    Thank you again!

     

Back to Top