Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / FormDecorator / How to disable and change the text of decorated buttons during Ajax request

How to disable and change the text of decorated buttons during Ajax request

Article Info

Rating: 5

Article information

Article relates to

 RadControls for ASP.NET AJAX

Created by

 Georgi Tunev

Last modified

 2009/1/29

Last modified by

 Fiko



A common scenario is to disable and change the text of buttons during an Ajax request. The attached example shows how to do this when these buttons are decorated with RadFormDecorator.
What you need to have in mind in such scenario is that you should modify both the real (hidden) button and the decorated one. To do this, you need to have the ClientID of the button. Since RadAjax's OnAjaxRequestStart/End eventhandlers provides you with the UniqueID of the control that initiated the Ajax request, you can use a regular expression to convert the UniqueID to ClientID.

JavaScript:
<script type="text/javascript">
    function OnAjaxRequestStart(oAjaxPanel, eventArgs)
    {
        //pass the uniqueID of the real button
        setButtonEnabled(eventArgs.get_eventTarget(), false);
    }
 
    function OnAjaxRequestEnd(oAjaxPanel, eventArgs)
    {
        //pass the uniqueID of the real button
        setButtonEnabled(eventArgs.get_eventTarget(), true);
    }
 
    var loadingMessage = "Processing...";
    var lastClickedButtonValue;
    function setButtonEnabled(realButtonUniqueID, isEnabled)
    {
        //convert the uniqueID to ClientID
        var buttonClientID = realButtonUniqueID.replace(/\$/g, "_");
        var buttonIdSelector = "#" + buttonClientID;
        var jQ = $telerik.$; // jQuery
        if (isEnabled)
        {
            //restore the text of the button
            jQ(buttonIdSelector).val(lastClickedButtonValue);
            //Enable the decorated button
            jQ(buttonIdSelector).attr('disabled', '');
        }
        else
        {
            lastClickedButtonValue = jQ(buttonIdSelector).val();
            //change the text of the button
            jQ(buttonIdSelector).val(loadingMessage);
            //disable the decorated button
            jQ(buttonIdSelector).attr('disabled', 'disabled');
        }
    }
</script>

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.