TextBox onblur with RadAjaxmanager

[kachy]

I have to enable/disable button on the textchanged event. If I use server side textchanged event with autopostback true, the Ajax request takes some time and in the meantime, the user can click the button which is enabled but has to be disabled on text changed event. How can I do the Javascript Onblur event with RadAjaxmanager on the page or trap the textbox onblur event even if the button is clicked ?

Thanks

Thanks.

[kachy]

My RadAjaxManger definitions and settings are :

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true"
         onajaxrequest="RadAjaxManager1_AjaxRequest">
      <ClientEvents OnRequestStart="OnRequestStart" />
     <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TextBox1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStripRelease" />
                <telerik:AjaxUpdatedControl ControlID="TextBox1" LoadingPanelID="AjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="TextBox2" LoadingPanelID="AjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="TextBox3" LoadingPanelID="AjaxLoadingPanel1"/>
               <telerik:AjaxUpdatedControl ControlID="btnSubmit1" />
                <telerik:AjaxUpdatedControl ControlID="hidValue" />
                <telerik:AjaxUpdatedControl ControlID="btnSubmit2"/>
                <telerik:AjaxUpdatedControl ControlID="TextBox4" LoadingPanelID="AjaxLoadingPanel1"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TextBox1" />
                <telerik:AjaxUpdatedControl ControlID="checkBox1" LoadingPanelID="AjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="linkButton1" />
                <telerik:AjaxUpdatedControl ControlID="btnSubmit1" />
                <telerik:AjaxUpdatedControl ControlID="btnSubmit2" />
                <telerik:AjaxUpdatedControl ControlID="hidValue" />
            </UpdatedControls>
        </telerik:AjaxSetting>
 </AjaxSettings>
  </telerik:RadAjaxManager>

function enableButtons() {
           document.getElementById('<%= btnSubmit1.ClientID%>').disabled = false;
           document.getElementById('<%= btnSubmit2.ClientID%>').disabled = true;
       }

C# code to attach onBlur event is:

 txtPhysicianInterp.Attributes.Add("OnBlur", "enableButtons();");

aspx OnRequestStart .......

 function OnRequestStart(ajaxControl, eventArgs) {
           var eventTarget = eventArgs.EventTarget;
           if (eventTarget == "<%= btnSubmit1.ClientID %>") {
               DO something......
               return true;
           }
           if (eventTarget == "<%= btnSubmit2.ClientID %>") {//if AJAX request is started by Submit2 Button

               if (document.getElementById('<%= CheckBox1.ClientID%>').checked == false) {
                   var bTrue = confirm("");
if (bTrue)
return true;               }
}



}

When the page is first loaded, btnSubmit1 is disabled and btnSubmit2 is enabled. If TextBox1 is changed then I want to enable btnSubmit1 and disable btnSubmit2. First I did that with TextBox text changed event server side, but that takes some time to finish, so user is able to click on btnSubmit2. I want to do the clientside onBlur or onFocus event of TextBox but the way I am trying right now, all AJAX call stops after that. I have 2 entries for RadAjaxManager1 as AjaxControlID . I have tried with just one entry for RadAjaxManager1, it does the same thing. Please let me know how can I use the onBlur of TextBox in this scenarioo when ClientEvent OnRequestStart is also being used for RadAjaxManager1.

Thanks

[Martin]

Hello Kachy,

One possible approach is to use a RadAjaxLoadingPanel that will be shown over the updated controls during the AJAX call. This way the user will not be able to click on the buttons before the loading panel is hidden. Here are the sample code snippets:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function ClientClick()
        {
            alert("Hi");
        }
    </script>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Vista"
        MinDisplayTime="5000" Transparency="0">
    </telerik:RadAjaxLoadingPanel>
    <asp:Panel runat="server" ID="Panel1" Width = "350px">
        <telerik:RadTextBox runat="server" ID="RadTextBox1" OnTextChanged="Text_Changed"
            AutoPostBack="true">
        </telerik:RadTextBox>
        <asp:Button runat="server" ID="Button1" Text="Clear source" Enabled="false" OnClientClick="ClientClick();return false;" />
        <asp:Button runat="server" ID="Button2" Text="Apply source" Enabled="true" OnClientClick="ClientClick();return false;"/>
</asp:Panel>

And the Code behind:

protected void Text_Changed(object sender, EventArgs e)
    {
        Button1.Enabled = true;
        Button2.Enabled = false;
    }

I hope this helps,
Martin
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.