How To Prevent Double-Clicking Of Any Toolbar Button

[Virgil Rodriguez]

I need to be able to prevent users from double-clicking on a toolbar button or very quickly click on two toolbar buttons. Or better yet, have the whole toolbar disabled after single-clicking on a toolbar button.

This is just to prevent any intended function to be run more than once or to prevent any unintended function to be executed.

Thanks for any help.

[Shinu]

Hi Virgil,

One suggestion would be disabling the RadToolBar temporarily to prevent second click as shown below. I set timeout to 1 second which will disable the RadToolBar for the next second after the first click.

ASPX:

<telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="OnClientButtonClicked">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Button 0">
        </telerik:RadToolBarButton>
         . . .
    </Items>
</telerik:RadToolBar>

JavaScript:

<script type="text/javascript">
    var toolbar;
    function OnClientButtonClicked(sender, args) {
        sender.set_enabled(false);
        toolbar = sender;
        setTimeout('toolbar.set_enabled(true);', 1000);
    }
</script>

-Shinu.

[Virgil Rodriguez]

Thanks Shinu.

I tried your suggestion, however, I am still able to click a 2nd time (and sometimes even a 3rd time) or even single-click another button.

Shinu, any other ideas would be appreciated.

Telerik, any thoughts or suggestions.

Thank you.

[Peter]

Hi Virgil,

We were going to suggest the same workaround as Shinu's. If you need to disable the toolbar permanently after clicking on it, simply remove the following line from the code Shinu sent you:

setTimeout('toolbar.set_enabled(true);', 1000);


Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Virgil Rodriguez]

Thanks Peter.

The problem and (I think it is a big problem) lies in the fact that the toolbar buttons are still clickable even before routines being run from the first mouse-click have been completed.

So, there is a danger that intended routines are unnecessarily run more than once, in the case of a double-click on a button or ... an unintended routine is accidentally executed, in the case of two very quick single-clicks on two buttons.

Your help is very much appreciated.

[Peter]

Hello Virgil,

Do you have a specific example which demonstrates this drawback of RadToolbar? If you provide more information and describe your case in detail, we will try to find a suitable workaround to the problem.


All the best,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Virgil Rodriguez]

Here it is Peter:

Default.aspx:

<telerik:RadToolBar ID="myToolbar" runat="server" Skin="Vista" Width="100%" AutoPostBack="true" CausesValidation="true">
  <Items>
       <telerik:RadToolBarButton Text="Proceed" ImageUrl="~/images/system/proceed.png" Font-Bold="true" Font-Size="X-Small" Tooltip="Proceed to save changes then exit" CommandName="Proceed" />

       <telerik:RadToolBarButton Text="Abort" ImageUrl="~/images/system/exit.png" Font-Bold="true" Font-Size="X-Small" Tooltip="Exit without saving changes" CommandName="Abort"/>
  </Items>
</telerik:RadToolBar>

Default.vb:

    Protected Sub myToolbar_ButtonClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadToolBarEventArgs) Handles CMSAdminToolbar.ButtonClick
        Select Case e.Item().Text
            Case "Proceed"
                GoProceed()
            Case "Abort"
                AbortChanges()
            Case Else
        End Select
    End Sub

    Protected Sub GoProceed()
       ' Do some time-consuming stuff
       ' Or maybe just output something that increments somewhere
    End Sub

    Protected Sub AbortChanges()
       ' Do some time-consuming stuff

    End Sub

At the first mouse-click on the "Proceed" button, the sub-routine GoProceed() is executed. If this is a long process, a second (or any subsequent) mouse-click(s) on the same button, will re-execute the sub-routine GoProceed() even when it hasn't finished executing from the first (or previous) mouse-click.

Or a user could single-click the "Proceed" button, which will then execute the sub-routine GoProceed(). If this is a long process, and the user clicks another button, say the "Abort" button, it will stop executing GoProceed() and instead execute the AbortChanges() sub-routine.

In both cases, the effect of additional mouse-clicks is not acceptable and I think disabling the whole Toolbar itself after a single mouse-click, is the most ideal solution to this. Although the RadToolbar control has an Enabled property, it doesn't seem to work instantly as it should.

Any work-around you can suggest?

Thanks,
Virgil

[Peter]

Hello Virgil,

I understand your concern. Currently, there isn't any other workaround but we will consider providing some sort of a built-in solution for the future.


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Josh]

I know this isn't exactly what you are looking for but the workaround I use is to take Shinu's solution but change the sender.set_enabled(false); to sender.set_visible(false);.  It isn't the prettiest solution but it does provide visual feedback to the users.

<script type="text/javascript">
    var toolbar;
    function OnClientButtonClicked(sender, args) {
        sender.set_visible(false);
        toolbar = sender;
        setTimeout('toolbar.set_visible(true);', 5000);
    }
</script>

[Cori]

Hello Virgil,

You could take another approach using Shinu's code, where you have a variable the determines if one of the RadToolBar buttons has already been clicked and cancel the postback of the new button. You'll need to handle the OnClientButtonClicking event for this. Like so:

<script type="text/javascript">
    var toolbarBurronClicked = false;
    function OnClientButtonClicking(sender, args) {
        if (!toolbarButtonClicked){
             sender.set_enabled(false);
             toolbarButtonClicked = true;
        }
        else {
              sender.set_cancel(true);
              alert('Another process is running!');
        }
    }
</script>

You can then re-enable it after the postback in your RadToolBar's server-side button click event.

I hope that helps.

[Albert Shenker]

any update on when such functionality might be avaialbe in RadToolbar? Telerik has created examples of hot to do this using RadButton. I would think they could extend this to toolbar buttons in some fashion. To reiterate the problem, users are often trigger happy or are used to environments, like their desktop, where they have to double click on things for something to happen. Double clicking in data submission forms is bad. it would be nice if you could somehow prevent these users with triggert fingers from double clicking.

[Peter]

Hi Albert,

This is not implemented as a built-in feature for RadToolBar. If there is an increased demand for it, we will consider it for the future.

Kind regards,
Peter
the Telerik team

[Leon]

You can try this but I don't know about browser compatibility: http://www.webreference.com/js/tips/020201.html

[Albert Shenker]

Thanks fore the reply, Leon, but Telerik already offers a solution to prevent double clicks in their RadButton product. The issue brought up here is that they don't have a similar solution for buttons in their RadToolbar product, which seems odd, given that their toolbar product has been around a lot longer than their button product.

Unfortunately, given Peter's post from Telerik, I am not holding my breath that this will become a feature any time soon. My experience is, when they say the will consider it for future development if enough people bring it up, this usually means it will be a minimum of two years before its implemented... if at all. I honestly don't understand why customer input is necessary for something that should be obvious to their own engineers as a beneficial and important feature.

[Genady Sergeev]

Hi Albert,

The feature provided by RadButton for disabling upon first click is exactly the same as the one implemented in RadToolbar. It makes use of the client set_enabled property which effectively disables the buttons via detaching their click handlers. It is not possible that these buttons will trigger a click to the server after they are disabled. This only can happen if the the set_enabled(false) function is placed inside a timeout which is set for, say, 3 or 4 seconds and during that time the user presses the button.

Here is example that shows that RadToolbarButtons can be disabled after the first click the same way as RadButton:

<script type="text/javascript">
        function clicked(sender, args) {
            if (sender.get_enabled())
                sender.set_enabled(false);

            alert('clicked!');
        }
    </script>

    <telerik:RadToolBar runat="server" ID="RadTooblar1" OnClientButtonClicked="clicked">
        <Items>
            <telerik:RadToolBarButton runat="server" Text="Button 0">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="Button 1">
            </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>

Regards,
Genady Sergeev
the Telerik team

[Virgil Rodriguez]

Hi Genady,

I started this thread almost 3 years ago.

If you go back to the beginning, you will find that the solution you just gave is actually the same solution that Shinu gave. The only difference is that yours doesn't re-enable the toolbar after disabling it, which doesn't make sense, because you do need to re-enable it.

Both your solutions do not work, however. Okay, your solution does work but this is only because of the alert() statement included. But if that alert() statement is not there, it is still possible for the button in the RadToolbar to be clicked again or the other buttons to be clicked while the processing is still going on.

There is obviously a bug in the RadToolBar control because although it has an Enabled property, it doesn't seem to work instantly as it should, when you set it to False.

I agree with Albert. It has been almost 3 years now and Telerik seems to have just ignored this very important and necessary feature.

Meanwhile, if anyone is interested, the workaround I did was to display a message to PROMPT the user to confirm the button that he/she have just clicked. This opens a dialog box that the user must respond to, thereby preventing them from accidentally clicking the original button again or clicking any other buttons in the RadToolBar. See below:

function OnClientButtonClicking(sender, args) {
    sender.set_enabled(false);
    var btn = args._domEvent.eventMapTarget.innerText;
    args.set_cancel(HandleSelectedOption(btn));

    sender.set_enabled(true);   // we need to re-enable the RadToolBar again
    btn = null;
}
function HandleSelectedOption(opt) {
        if (confirm('Do you want to continue with the ' + opt + ' process?'))
        {
         return false;
        }
        else
        {
         return true; // Cancel the event if clicked on "Cancel", so that the server event will not fire
        }
}

The fix for this bug is long overdue. So, if Telerik could please look into this issue again, it would be very much appreciated.

Thank you.

[Albert Shenker]

I'd like to verify that I have tried Genady's solution and it seems to work in my scenario. I want to prevent users "double clicking" on a toolbar button which is used to submit data. A corrolary scenario is when users click on a toolbar button which starts a fairly long-running process, and then the user gets impatient and clicks on the button again before the first process finishes. In my testing, Genady's solution solved both problems. The button gets disabled on the client so that the user's clicks are harmless, and when the server-side process which the button initated is done, the button is once a gain enabled. During the disabled state, the button doesn't actually appear disabled, and maybe this is what Virgil is getting at, however, i have tried making double-clicks in close succession and never got an instance where a record was added twice, even though I verified that clicking the button twice in succession (after the first process finished), did add another record.

1) If i want the button to remain fully disabled once clicked so that users can no longer perform the same action, I can disable it server-side in the button click handlerand then it will "look" disabled and be disabled.

2) I do not think this solution will solve the issue of users clicking on some other button while the process which the first button initiated is still gong on. I think you would have to disable the whole toolbar in this instance. Perhaps genady can provide an example of how one would do that.

3) I assume that my button was "re-enabled" because the page post back and when the server-side process was done, it basically returned the toolbar to its initial state. My question is, how would I "re-enable" the button after the process is complete in an ajax implementatin when there is no postback which would return the toolbar to its initial state. Setting the button's enabled property to true server-side doesn't do the trick. I think I would have to call some javascript from the server-side code when the prcess is done in order to re-enable the button, but I'm not sure how I would get a reference to the button in a javascript function which isn't a handler for a toolbar event.

[Genady Sergeev]

Hi guys,

We will dive into the issue and will take measures should we find that the current implementation of enabled/disabled state is buggy. Thank you for your feedback! In any way, the fixes should we make them, will be included in the upcoming Q3 release.

All the best,
Genady Sergeev
the Telerik team

[Albert Shenker]

In a few weeks it will be the third major release since this thread was last posted on. I am wondering if Telerik is any closer to having the "SingleClick" functionality on their toolbar buttons like they have on their Rad Buttons. I really don't have a clue why this would be difficult to implement since they already have the code base available from Rad Button. And it should be obvious to Telerik that if the functionality is something that is necessary on RadButton, then it is equally necessary on Toolbar Buttons. It is extremely frustrating that we have been given no indication from Telerik either of when such functionality will be implemented, or why it is not immediately being implemented in the next minor release.. never mind several major ones.

[Genady Sergeev]

Hello guys,

I've raised the priority of this problem and we are now working on it. I will update the thread when we are ready. The reason that feature was not implemented by now is the mentioned low priority it has.

Regards,
Genady Sergeev
Telerik

[Peter Filipov]

Hello,

Because of the importance of the topic we have created a special item in our feedback portal. You could give us some details about how you want that feature to be implemented.

Regards,
Peter Filipov
Telerik

[Peter Filipov]

Hello guys,

The feature is already implemented. In case that you want to test it please open a new support ticket and I will send you an internal build with the desired functionality.

Regards,
Peter Filipov
Telerik

[Albert Shenker]

 I assume when you say "the feature is implemented" you mean there is now a "SingleClick" property on Rad Toolbar buttons which prevents double click submissions from occurring. Correct?

I also assume this will be part of the next service pack. If that is the case, it is sufficient for me to wait till then.

[Peter Filipov]

Hi Albert,

You are correct. The feature will be part of the Q2.2013 SP1 release. In case that you want to test it before that date, please open new support ticket and I will send you an internal build which contains the SingleClick functionality.

Regards,
Peter Filipov
Telerik

[Albert Shenker]

I can't seem to find any documentation of this feature on your site, in either the demos or help files. I see that you have a "SingleClick" property on the toolbar. I don't see a SingleClick property on indivudual toolbar Buttons, nor a SinglClickText property on individual buttons, which leads me to believe this feature does not actually have the same functionality as RadButton. So I am left to wonder why your RadButton has a SingleClick functionality, but your Toolbar Buttons do not. Was that not the point of this entire 4-year long thread? If I am incorrect, please point me to where this functionailty is documented.

[Peter Filipov]

Hi Albert,

Thank you for pointing this out. In a way of gratitude I updated your Telerik points. The documentation will be updated accordingly.
The SingleClick property is used to avoid multiple postbacks/callbacks to the server, so that once a button is clicked, the user can not click it again until the request has completed. In general there are three values that you can set to the property: ToolBar, Button and None. The ToolBar makes the control inactive until the request is complete. When you set the value to Button, you will make only the clicked button inactive while the request is being executed. Once you set the None value, you enable the user to click multiple times to the buttons of the control.

Regards,
Peter Filipov
Telerik

[Stacy]

I have a radtoolbar with radtoolbarbuttons that open a popup window when clicked (via javascript "onClick" method on the radtoolbarbutton). 

Setting the toolbar property "SingleClick=Toolbar" or "SingleClick=Button" - I am still able to double click my "open" button and open two windows.  

I was expecting this property to only allow a single click, which would prevent two windows from opening. 

Trying other code I've seen, this never worked because the radtoolbarbutton's "onclick" event happens before the toolbar's "onClientClicked" event, and I'm guessing this is the same problem with this property.  Can this be fixed?

[Peter Filipov]

Hello Stacy,

I have tested the property and the control is working fine. Please use the API of the toolbar to handle the button click event e.g.:

    <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
    <telerik:RadToolBar runat="server" OnClientButtonClicked="OnClientButtonClicked" SingleClick="Button">
        <Items>
            <telerik:RadToolBarButton  Text="butoton"></telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>


<script type="text/javascript">
    function OnClientButtonClicked(sender, args) {
        alert("open window");
    }
</script>

Adding onclick handler directly on the toolbarbuton you will not be able prevent the click.

Regards,
Peter Filipov
Telerik

 

 

[Stacy]

Using the toolbar to control things wont be an option for my case, as it's a bit more complex than triggering an alert.  And how do you know what button is clicked using your method?  I'm guessing by "text"?  That would not be an option for me either as our "text" is dynamically generated based on a clients language preference. 

[Peter Filipov]

Hello Stacy,

My suggestion is to set the value of the button e.g. to "-1" and check it in the event handler.

Regards,
Peter Filipov
Telerik