loading panel with a type ahead functionality in text box

[Anumeha]

I have a search text box which fetches data for a grid and populates when the user enters something in the textbox. I have a loading panel attached to the search box. The loading image shows when the first letter is enetered. However, if the user puts in more characters the loading image does not show and there is no indication that the page is fetching the data and the grid is loading. I assume it has to do something with the typing in more characters intercepting the previously sent request but is there a workaround for the loading image to show with each character enetered?

This issue is really troubling our client.

I add this on Page_Load to the text box :

RadTextBoxName.Attributes.Add(

"onkeyup", "setTimeout('__doPostBack(\\'" + RadTextBoxName.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");

and have this in my AJAXSettings

 

<telerik:RadAjaxManagerProxy ID="RadAJAXManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTextBoxName">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBoxName" />
                    <telerik:AjaxUpdatedControl ControlID="errorLabel" />
                    <telerik:AjaxUpdatedControl ControlID="LinkButtonExpandedSearch" />
                    <telerik:AjaxUpdatedControl ControlID="dummyTextBox" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadGridContact" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Let me know if I can provide more information.

[Iana Tsolova]

Hello Anumeha,

In order to control the RadAjaxLoadingPanel in your case, you can try showing and hiding it explicitly. Check out this article for more information.

Best wishes,
Iana
the Telerik team

[Anumeha]

Hi lana,

I tried showing and hiding the loadin panel explicitly by setting the control ID of the textbox as below:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            var currentLoadingPanel = null;
            var currentUpdatedControl = null;

            function RequestStart(sender, args) {

                if (args.EventTarget.indexOf('RadTextBoxName') != -1) {
                    currentLoadingPanel = $find("<%= RadAjaxLoadingPanel2.ClientID %>");
                    currentUpdatedControl = args.EventTarget;

                    //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);

                }

            }

            function ResponseEnd() {
                //hide the loading panel and clean up the global variables
                if (currentLoadingPanel != null)
                    currentLoadingPanel.hide(currentUpdatedControl);
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }


        </script>

    </telerik:RadCodeBlock>

I have a master content page scenario.

The aspx.cs code for setting the AJAX attributes:

protected

 

void RadTextBoxName_PreRender(object sender, EventArgs args)

 

{

 

RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "RequestStart";

 

 

RadAjaxManager.GetCurrent(Page).ClientEvents.OnResponseEnd = "ResponseEnd";

 

}

However, loading image just shows on the first key stroke or if i give a pause before typing another character. This was the case as earlier. If I type in continous characters like type in a name without giving a pause the loading panle disappears as soon as I type in the second character and the subsequent characters and does not show again and the data is loaded after some time.

Unfortunately, I am not sure how to create a runnable demo for this because the response time has to be big enough for this to happen.

Please suggest.

[Anumeha]

I was doing some more research and I came across this forum post:
http://www.telerik.com/community/forums/aspnet-ajax/ajax/does-set-enableajax-false-close-radajaxloadingpanel.aspx

On my Textbox to support the type ahead functionality that is bring in results without having the user click the search button as and when they type I am doing a JS postback.
This is the code that I am using :

 

RadTextBoxName.Attributes.Add(

 

"onkeyup", "setTimeout('__doPostBack(\\'" + RadTextBoxName.ClientID.Replace("_", "$") + "\\',\\'\\')', 0);");

Is it the postback that causes the loading panel to disappear? As I understand the _doPostback should only trigger an async postback call.

How can I have the loading panel show. In some cases the response time can be bigger than a couple seconds and it's annoying for the user not to know that some processing is going on and the data is still being loaded.

Please tell me what I can do to achieve this.

 

 

[Iana Tsolova]

Hi Anumeha,

Please find the attached sample and let me know if it works for you.

Sincerely yours,
Iana
the Telerik team

[Anumeha]

Hi lana,

I am running my projects on .NET 2.0.
I was unable to run this project. Could you send me a project compatible to run in .NET 2.0

Thanks.

[Iana Tsolova]

Hi Anumeha,

In this case, try using the attached web.config file for the previously provided sample and change the Telerik dlls in its Bin folder with the ones you are using.
Another option is just to move the aspx page to an existing .NET 2.0 web site you have configured to work with RadControls for ASP.NET AJAX.

Regards,
Iana
the Telerik team

[Anumeha]

I was unable to get it working the way I wanted. The loading image still disappears as soon as i type in another character.

I have submitted a support ticket with a demo project where i am unable to produce the desired results.
Please advice.

[Iana Tsolova]

Hello Anumeha,

Thank you for opening a formal support ticket. We will check it out and turn back to you with our findings.

Regards,
Iana
the Telerik team