How to disable RadButton during AJAX?

[LamKhoa]

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.

[Princy]

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.

[LamKhoa]

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.

[LamKhoa]

Would you please zip and send me your VS 2010 project? I would like to open and see it by myself.
Thanks

Lamk.

[LamKhoa]

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.

[Slav]

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

[LamKhoa]

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

[Kevin]

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.

[Slav]

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

[LamKhoa]

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;

}

}

[Slav]

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

[LamKhoa]

Thanks Slav

It works like a charm.
Lamk

[Pradeep]

Hi Kevin,
    Thanks for the code u posted here.... It works well. But How can I call the attached event to that control.

[Iman]

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?