How to disable RadButton during AJAX?

14 posts, 1 answers
  1. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 12 Nov 2011 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Nov 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 14 Nov 2011 Link to this post

    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.
  5. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 22 Nov 2011 Link to this post

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

    Lamk.
  6. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 01 Dec 2011 Link to this post

    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.
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 06 Dec 2011 Link to this post

    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
  8. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 06 Dec 2011 Link to this post

    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
  9. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Dec 2011 Link to this post

    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.
  10. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 09 Dec 2011 Link to this post

    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
  11. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 09 Dec 2011 Link to this post

    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;
    }
    }
  12. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 14 Dec 2011 Link to this post

    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
  13. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 14 Dec 2011 Link to this post

    Thanks Slav

    It works like a charm.
    Lamk
  14. Pradeep
    Pradeep avatar
    8 posts
    Member since:
    Oct 2010

    Posted 16 Dec 2011 Link to this post

    Hi Kevin,
        Thanks for the code u posted here.... It works well. But How can I call the attached event to that control.
  15. Iman
    Iman avatar
    4 posts
    Member since:
    May 2012

    Posted 20 Oct 2012 Link to this post

    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?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017