This is a migrated thread and some comments may be shown as answers.

Delayed DropDown appears after select and searchbox is hidden

1 Answer 56 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 28 Jan 2014, 08:11 PM
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>

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 31 Jan 2014, 01:39 PM
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.
Tags
SearchBox
Asked by
Michael
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or