Delayed DropDown appears after select and searchbox is hidden

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Feb 2013

    Posted 28 Jan 2014 Link to this post

    I am using searchbox to pick locations/places via webservice.
    The searchbox is only shown when the location is to be updated, so after a location has been selected from the dropdown, it is hidden again. This works fine most of the time, but occasionally the search returns too slow and a selection has been made on the dropdown before the latest search returns and the searchbox is hidden and just the location name shown. Then all of a sudden the dropdown is shown in the top left corner of the browser. So this is not yet fit for user consumption.
    How can I avoid this "late" dropdown showing or otherwise address this?

    Current code (not yet extravted as user control, which would be the next step):
       <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadCodeBlock ID="RadCodeBlockProfile" runat="server">
                <script type="text/javascript">
                    function ShowHide(showMe, hideMe) {
                        document.getElementById(showMe).style.display = "block";
                        document.getElementById(hideMe).style.display = "none";
                        $find("<%= rsb_location.ClientID %>").get_inputElement().value = '';
                    }

                    function rsb_location_Search(sender, eventArgs) {
                        var value = eventArgs.get_value();
                        if (value != null && value != "0") {
                            document.getElementById('<%= this.FindControl("lbl_CurrentLocation").ClientID %>').innerHTML = eventArgs.get_text();
                            ShowHide('locPickShow', 'locPickUpdate')
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
            <div>
                <h1>Test-bed of new location picker</h1>
                <div style="margin-top: 30px">
                    <div style="width: 120px; float: left">
                        Your Location:
                    </div>
                    <div style="float: left">
                        <div id="locPickShow" style="display: block">
                            <asp:Label ID="lbl_CurrentLocation" runat="server" CssClass="labelLink" onclick="ShowHide('locPickUpdate', 'locPickShow')" ToolTip="click here to change the location">not specified</asp:Label>
                        </div>
                        <div id="locPickUpdate" style="display: none">
                            <fieldset style="border-radius: 10px">
                                <legend>update location</legend>

                                <div style="margin-right: 20px">
                                    <telerik:RadSearchBox ID="rsb_location" runat="server" Skin="MetroTouch" MinFilterLength="2" EmptyMessage="type and select from options"
                                        Width="300px" EnableAutoComplete="true" OnClientSearch="rsb_location_Search" DropDownSettings-Height="150px" DropDownSettings-Width="335px"
                                        DropDownSettings-CssClass="ddtext"
                                        ShowSearchButton="false" ToolTip="Start typing the location, then pick from the dropdown">
                                        <WebServiceSettings Method="GetLocationMatches" Path="../WebServices/LocationMatches.asmx" />
                                    </telerik:RadSearchBox>

                                    <span style="position: relative; left: 20px; top: -15px">
                                        <asp:Label ID="lblcancel" runat="server" CssClass="labelLink" onclick="ShowHide('locPickShow', 'locPickUpdate')" ToolTip="click here to cancel">X</asp:Label>
                                    </span>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </form>
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 31 Jan 2014 Link to this post

    Hello Michael,

    I have tested the code that you provided but unfortunately could not replicate any unusual issue. I am attaching my sample test web page and here you can see the video of my test. Would you please review them and let me know what else should be done or added to observe the unusual behavior?

    Regards,
    Plamen
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top