This is a migrated thread and some comments may be shown as answers.

How to disable RadButton during AJAX?

13 Answers 386 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
LamKhoa
Top achievements
Rank 1
LamKhoa asked on 12 Nov 2011, 06:47 PM
I tried to follow this article http://www.telerik.com/help/aspnet-ajax/ajax-disable-controls-during-ajax.html
But it only works with ASP.NET Button, not with RadButton.
How to make it work with RadButton?
Thanks

Lamk.

13 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 14 Nov 2011, 06:25 AM
Hello LamKhoa,

I have tried the same with RadButton and it worked as expected. I am using version 2011, 2, 915, 35. You can give the AjaxControlID as RadButton ID. Here is the sample code.

ASPX:
<telerik:RadButton ID="RadButton2" runat="server" Text="df"></telerik:RadButton>
     <asp:Label ID="Label1" runat="server" ></asp:Label>
   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
         <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="RadButton2">
                 <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="Label1" />
                 </UpdatedControls>
             </telerik:AjaxSetting>
         </AjaxSettings>
         <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
     </telerik:RadAjaxManager>

JS:
<script type="text/javascript">
     function RequestStart(sender, args)
     {
         args.EventTargetElement.disabled = true;
     }
     function ResponseEnd(sender, args)
     {
       args.EventTargetElement.disabled = false;
     }       
</script>

Thanks,
Princy.
0
LamKhoa
Top achievements
Rank 1
answered on 14 Nov 2011, 07:03 AM
I tried exactly like you said, but it didn't work. (I have the same Telerik version as you did)
Would somebody else please verify this?

Thanks

Lamk.
0
LamKhoa
Top achievements
Rank 1
answered on 23 Nov 2011, 03:58 AM
Would you please zip and send me your VS 2010 project? I would like to open and see it by myself.
Thanks

Lamk.
0
LamKhoa
Top achievements
Rank 1
answered on 01 Dec 2011, 06:44 PM
Hello,

It's been a long time and I didn't see your answer.
Please zip your project and attach it in your post for me to download, I would like to take a  look at it by myself.
If it didn't work with RadButton, then please just say it, I will try to see if it's worth to switch back to normal ASP.NET button.

Thanks.

Lamk.
0
Slav
Telerik team
answered on 06 Dec 2011, 02:00 PM
Hi Lamkhoa,

Please refer to the attached sample in order to incorporate the desired feature into your actual project. Note that it is recommended to use the RadButton's client method set_enabled in order to enable and disable it. Also, as stated in the online demo Single Click Button, the UseSubmitBehavior property of RadButton should be set to false in order to avoid problems with submitting the page under older browsers (IE6,7 and 8) due to the disabled="disabled" attribute, which is applied to the disabled button.

Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
LamKhoa
Top achievements
Rank 1
answered on 06 Dec 2011, 03:43 PM
If we do it this way, I have to do it for every single component (buttons, radio button, checkbox, etc) on the page. Is there anyway to make it universal? Like converting the sender parameter to whatever button that was clicked?

Thanks
Lamk
0
Kevin
Top achievements
Rank 2
answered on 07 Dec 2011, 02:56 PM
Hello LamKhoa,

This is the code style I use for my single click buttons.

JS:
// Single-Click RadButton Functions 
        function btnSingleClick_OnClientLoad(sender, args) {
            try {
                // enable control 
                sender.set_enabled(true);
                // set text to first entry in array 
                sender.set_text($telerik.$(sender.get_element()).attr("ToggleText").split("|")[0]);
            } catch (e) { }
        }
        function btnSingleClick_OnClientClicked(sender, args) {
            try {
                // determine if page is valid 
                var pageIsValid;
  
                try {
                    // get value from Page_IsValid 
                    // NOTE: Contained this assignment in try block in case Page_IsValid doesn't exist 
                    pageIsValid = Page_IsValid;
                } catch (e) { }
  
                // make sure page is valid or validation is null (doesn't exist) 
                if (pageIsValid || pageIsValid == null) {
                    // disable control 
                    sender.set_enabled(false);
                    // toggle text to second entry in array 
                    sender.set_text($telerik.$(sender.get_element()).attr("ToggleText").split("|")[1])
                }
            } catch (e) {
            }
        }

Skin:
<telerik:RadButton runat="server" SkinId="btnSingleClick" OnClientLoad="btnSingleClick_OnClientLoad" OnClientClicked="btnSingleClick_OnClientClicked">
</telerik:RadButton>

ASPX:
<telerik:RadButton ID="btnSave" runat="server" Text="Submit Request" UseSubmitBehavior="false" SkinID="btnSingleClick" ToggleText="Submit Request|Submitting Request..."
</telerik:RadButton>

So in my javascript I enable the button in the Load event and disable it during the click event. I use a ToggleText property to style my single clicks and I use the skin file to setup the client-side events. I then store my js in an external file so its available to all of my pages.

I hope that helps.
0
Slav
Telerik team
answered on 09 Dec 2011, 09:39 AM
Hi,

In order to make the script universal, you can use the method IsInstanceOfType to check the type of the client object. If it is a RadButton, you should use the set_enabled method and if it is a regular ASP Button - the disabled property. Below you can find an example of setting a flag that will determine the type of the used ASP control:
var isTelerikButton = Telerik.Web.UI.RadButton.isInstanceOfType(sender);

sender is the client object of the clicked button control.

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
LamKhoa
Top achievements
Rank 1
answered on 09 Dec 2011, 08:35 PM

Would you please attach a simple project, I tried following methods but it still didn't work with RadButton (It works with normal ASP.NET button anyway):

Thanks

Lamk.


function onRequestStart(sender, args) {
var isTelerikButton = Telerik.Web.UI.RadButton.isInstanceOfType(sender);
if (isTelerikButton==true) {
sender.set_enabled(false);
}
else {
args.EventTargetElement.disabled = true;
}
}
function onResponseEnd(sender, args) {
var isTelerikButton = Telerik.Web.UI.RadButton.isInstanceOfType(sender);
if (isTelerikButton==true) {
sender.set_enabled(true);
}
else {
args.EventTargetElement.disabled = false;
}
}
0
Accepted
Slav
Telerik team
answered on 14 Dec 2011, 10:19 AM
Hi Lamkhoa,

Note that in this particular case sender will refer to the RadAjaxManager control and if a RadButton is used, it won't be detected. This is why I would suggest an alternative approach - the args parameter of the event handlers RequestStart and ResponseEnd has a method get_eventTarget which returns the id of the button that initiates the Ajax request. This id can be used for getting the client element of the button. If it returns an object, when $find is utilized for finding the button, then the control is a RadButton and if it returns null then the control is a regular button and can be referenced with $get.

You can find attached a modified version of my previous sample. Please refer to it for implementing the described approach.

Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
LamKhoa
Top achievements
Rank 1
answered on 14 Dec 2011, 06:18 PM
Thanks Slav

It works like a charm.
Lamk
0
Pradeep
Top achievements
Rank 1
answered on 16 Dec 2011, 05:53 PM
Hi Kevin,
    Thanks for the code u posted here.... It works well. But How can I call the attached event to that control.
0
Iman
Top achievements
Rank 1
answered on 20 Oct 2012, 08:55 PM
hi
tanks for your replay
it work in the single form, but when i use this code in nested master page form don't work !
are u have any suggestion?
Tags
Ajax
Asked by
LamKhoa
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
LamKhoa
Top achievements
Rank 1
Slav
Telerik team
Kevin
Top achievements
Rank 2
Pradeep
Top achievements
Rank 1
Iman
Top achievements
Rank 1
Share this question
or