loading panel with a type ahead functionality in text box

9 posts, 0 answers
  1. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 08 Sep 2010 Link to this post

    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.

  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 09 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 10 Sep 2010 Link to this post

    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.

  4. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 10 Sep 2010 Link to this post

    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.

     

     

  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 14 Sep 2010 Link to this post

    Hi Anumeha,

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

    Sincerely yours,
    Iana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 14 Sep 2010 Link to this post

    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.
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 15 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Anumeha
    Anumeha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 20 Sep 2010 Link to this post

    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.
  9. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 21 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top