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

[Solved] RadComboBox delay problem with load on demand

1 Answer 319 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Hilmi Alphan Ozturk
Top achievements
Rank 1
Hilmi Alphan Ozturk asked on 11 Oct 2009, 11:49 PM
Hi,

I use a RadComboBox with load on demand feature. My problem is when I place the control in my application, the radcomobox waits about 20-30 seconds before calling the backend Itemrequested event. And then everything works as expected. When the user edits the text again, another 30 seconds have to pass before my backend function is called and the items in the drop down list are updated. Just to make sure, the time I mention is not passing in my backend function. My function is called after 30 seconds.

I took out the combo box to a new page to isolate the problem -and created the page below- which works just fine! The backend code is almost the same for both pages so I think it is irrelevant. There probably is some kind of interference with the RadComboBox and any other control in my application. I am adding the body part of my real application below too. It uses Google maps API and many other Telerik components. Any suggestions?

Thanks,
Ozgur
p.s. The second the page I'm adding below has two RadComboBoxes as I was trying to find out if it only habppens when the Combobox is in another control but no, bot of the combobozes there behave the same.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Search.aspx.cs" Inherits="PapBluemaps.Search" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
   
    <script type="text/javascript">

        searchHandler = function(caller) {
            var locationId = caller.get_value();

            alert(locationId);
        }

    </script>
   
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="blueMapsScriptManager" />
        <telerik:RadComboBox ID="searchBoxTest" AllowCustomText="True" runat="server" Width="160px"
            Height="100px" DataTextField="name" EmptyMessage="Search for Locations..."
            DataValueField="id" MarkFirstMatch="True"
            EnableLoadOnDemand="true" ShowMoreResultsBox="false" EnableVirtualScrolling="false" OnItemsRequested="searchBox_ItemRequested"
            OnClientSelectedIndexChanged="searchHandler"
            OnClientDropDownClosed="searchHandler" LoadingMessage="Searching..." Sort="Ascending" SortCaseSensitive="False">
        </telerik:RadComboBox>
    </form>
</body>
</html>

<body>
    <img alt="BlueNET" src="images/logo.png" class="logo" />
    <form id="mainForm" runat="server">
    <asp:ScriptManager runat="server" ID="blueMapsScriptManager" />
<telerik:RadComboBox ID="searchBoxTest" AllowCustomText="True" runat="server" Width="160px"
    Height="100px" DataTextField="name" EmptyMessage="Search for Locations..."
    DataValueField="id" MarkFirstMatch="True"
    EnableLoadOnDemand="true" ShowMoreResultsBox="false" EnableVirtualScrolling="false" OnItemsRequested="searchBox_ItemRequested"
    OnClientSelectedIndexChanged="searchHandler"
    OnClientDropDownClosed="searchHandler" LoadingMessage="Searching..." Sort="Ascending" SortCaseSensitive="False">
</telerik:RadComboBox>
    <telerik:RadSkinManager ID="radSkinManager" Skin="Office2007" runat="server" />
    <telerik:RadFormDecorator ID="blueMapsFormDecorator" runat="server" DecoratedControls="all" Skin="Web20"></telerik:RadFormDecorator>
    <div id="ParentDivElement" style="height: 100%;">
        <telerik:RadSplitter ID="mainSplitter" runat="server" Height="100%" Width="100%" Orientation="Vertical" LiveResize="true">
            <telerik:RadPane ID="leftPane" runat="server" Width="230" Scrolling="None">
                <center>
                    <img alt="Pinch a Penny" src="images/paplogo.png" /></center>
                <telerik:RadPanelBar runat="server" ID="controlPanel" Width="100%" Height="394" ExpandMode="FullExpandedItem"
                    CollapseAnimation-Duration="600" EnableViewState="False" ExpandAnimation-Duration="500"
                    BackColor="#EEEEFF">
                    <Items>
                        <telerik:RadPanelItem Text="Sales Overview" Expanded="true" ImageUrl="images/UI/overview.png">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <center>
                                            <iframe width='230' height='220' frameborder='0' scrolling="no" src='http://172.28.200.54/locationintelligence/finreport-en-us.mht'>
                                            </iframe>
                                            <button onclick="window.open('TabbedReportChain.aspx', 'child', 'top=0,left=0,screenY=0,screenX=0,width=1250,height=950,resizable=yes');">
                                                Chain Details</button>
                                        </center>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Business Locations" ImageUrl="images/UI/locationfilter.png">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <telerik:RadTreeView runat="server" ID="locationTypesTreeView" CheckBoxes="True"
                                            OnClientNodeChecked="HandleLocationTypesCheck">
                                            <Nodes>
                                                <telerik:RadTreeNode Text="Zones" Value="2" Checked>
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Stores" Value="3" Checked>
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Leslie's" Value="4">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeView>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Sales Metrics" ImageUrl="images/UI/measurefilter.png">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <b>&nbsp;Store Metrics</b><br />
                                            <telerik:RadToolBar ID="metrics" runat="server" Flow="Vertical" Orientation="Vertical"
                                                OnClientButtonClicking="salesMetricsClientSelectedIndexChanged">
                                                <Items>
                                                    <telerik:RadToolBarButton Text="None" Value="1" />
                                                    <telerik:RadToolBarDropDown Text="Sales Metrics">
                                                        <Buttons>
                                                            <telerik:RadToolBarButton Text="Last Week Growth" Value="2" />
                                                            <telerik:RadToolBarButton Text="Year to Date Growth" Value="3" />
                                                            <telerik:RadToolBarButton Text="Last Week Sales" Value="4" />
                                                            <telerik:RadToolBarButton Text="Year to Date Sales" Value="5" />
                                                        </Buttons>
                                                    </telerik:RadToolBarDropDown>
                                                    <telerik:RadToolBarDropDown Text="Mailer Count Metrics">
                                                        <Buttons>
                                                            <telerik:RadToolBarButton Text="Total Mailer Count" Value="11" />
                                                            <telerik:RadToolBarButton Text="% of  A" Value="13" />
                                                            <telerik:RadToolBarButton Text="% of  PR" Value="15" />
                                                            <telerik:RadToolBarButton Text="% Chg  A YTD" Value="17" />
                                                        </Buttons>
                                                    </telerik:RadToolBarDropDown>
                                                </Items>
                                            </telerik:RadToolBar><br />
                                            <asp:CheckBox ID="zonesame" Text="Zone metrics same as store" Value="1" Checked onClick="zoneSameAsStore(this)" runat="server" /><br />
                                        <b>&nbsp;Zone Metrics</b><br />
                                            <telerik:RadToolBar ID="RadToolBar1" runat="server" Flow="Vertical" Orientation="Vertical"
                                                OnClientButtonClicking="salesMetricsClientSelectedIndexChanged">
                                                <Items>
                                                    <telerik:RadToolBarButton Text="None" Value="6" />
                                                    <telerik:RadToolBarDropDown Text="Sales Metrics">
                                                        <Buttons>
                                                            <telerik:RadToolBarButton Text="Last Week Growth" Value="7" />
                                                            <telerik:RadToolBarButton Text="Year to Date Growth" Value="8" />
                                                            <telerik:RadToolBarButton Text="Last Week Sales" Value="9" />
                                                            <telerik:RadToolBarButton Text="Year to Date Sales" Value="10" />
                                                        </Buttons>
                                                    </telerik:RadToolBarDropDown>
                                                    <telerik:RadToolBarDropDown Text="Mailer Count Metrics">
                                                        <Buttons>
                                                            <telerik:RadToolBarButton Text="Total Mailer Count" Value="12" />
                                                            <telerik:RadToolBarButton Text="% of  A" Value="14" />
                                                            <telerik:RadToolBarButton Text="% of  PR" Value="16" />
                                                            <telerik:RadToolBarButton Text="% Chg  A YTD" Value="18" />
                                                        </Buttons>
                                                    </telerik:RadToolBarDropDown>
                                                </Items>
                                            </telerik:RadToolBar>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Geography" ImageUrl="images/UI/mapfilter.png">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <telerik:RadTreeView ID="locationsTreeView" runat="server" CheckBoxes="True" CheckChildNodes="True"
                                            DataSourceID="locationsTreeDataSource" OnClientNodeChecked="HandleLocationTreeCheck"
                                            OnClientNodeClicked="HandleLocationTreeClick" TriStateCheckBoxes="True" MaxDataBindDepth="2">
                                            <DataBindings>
                                                <telerik:RadTreeNodeBinding TextField="name" DataMember="location" ValueField="treeid"
                                                    TargetField="id" NavigateUrl="javascript:void(0)" Checked />
                                            </DataBindings>
                                        </telerik:RadTreeView>
                                        <table style="width: 100%; text-align: left">
                                            <tr>
                                                <td>
                                                    <button style="width: 70px" type="button" onclick="geoClearAllClick()">
                                                        Clear All</button>
                                                </td>
                                                <td>
                                                    <button style="width: 70px" type="button" onclick="geoCheckAllClick()">
                                                        Check All</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Custom Queries" ImageUrl="images/UI/customquery.png">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <fieldset style="width: 100%">
                                            <legend>Top 10 Stores</legend>
                                            <telerik:RadComboBox ID="topQueries" runat="server" OnClientSelectedIndexChanged="topCustomQuerySelected">
                                                <Items>
                                                    <telerik:RadComboBoxItem Text="None" Value="1" Selected="true" />
                                                    <telerik:RadComboBoxItem Text="LW Top 10 Sellers" Value="2" />
                                                    <telerik:RadComboBoxItem Text="LW Top 10 Growth" Value="3" />
                                                    <telerik:RadComboBoxItem Text="LW Top 10 Variance" Value="4" />
                                                    <telerik:RadComboBoxItem Text="YTD Top 10 Sellers" Value="5" />
                                                    <telerik:RadComboBoxItem Text="YTD Top 10 Growth" Value="6" />
                                                    <telerik:RadComboBoxItem Text="YTD Top 10 Variance" Value="7" />
                                                </Items>
                                            </telerik:RadComboBox>
                                        </fieldset>
                                        <fieldset style="width: 100%">
                                            <legend>Bottom 10 Stores</legend>
                                            <telerik:RadComboBox ID="bottomQueries" runat="server" OnClientSelectedIndexChanged="bottomCustomQuerySelected">
                                                <Items>
                                                    <telerik:RadComboBoxItem Text="None" Value="1" Selected="true" />
                                                    <telerik:RadComboBoxItem Text="LW Bottom 10 Sellers" Value="2" />
                                                    <telerik:RadComboBoxItem Text="LW Bottom 10 Growth" Value="3" />
                                                    <telerik:RadComboBoxItem Text="LW Bottom 10 Variance" Value="4" />
                                                    <telerik:RadComboBoxItem Text="YTD Bottom 10 Sellers" Value="5" />
                                                    <telerik:RadComboBoxItem Text="YTD Bottom 10 Growth" Value="6" />
                                                    <telerik:RadComboBoxItem Text="YTD Bottom 10 Variance" Value="7" />
                                                </Items>
                                            </telerik:RadComboBox>
                                        </fieldset>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
                <telerik:RadSplitter ID="leftSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" LiveResize="true">
                    <telerik:RadPane ID="Legend" runat="server" Width="100%" Scrolling="Both">
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <center>
                                    <b>Stores</b></center>
                            </td>
                            <td>
                                <center>
                                    <b>Zones</b></center>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <div class="legend" id="legend1"/>
                            </td>
                            <td valign="top">
                                <div class="legend" id="legend2"/>
                            </td>
                        </tr>
                    </table>
                </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="verticalSplitBar" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="mainPane" runat="server" Scrolling="none" MinWidth="500">
                <telerik:RadSplitter ID="nestedSplitter" runat="server" ResizeMode="EndPane" Orientation="Horizontal">
                    <telerik:RadPane ID="topPane" runat="server" Height="30px" Scrolling="none">
                        <!-- Place the content of the pane here -->
                        <telerik:RadToolBar ID="mainToolBar" runat="server" Style="z-index: 9000001" Width="1600px"
                            OnClientButtonClicking="blue.controlHandler">
                            <Items>
                                <telerik:RadToolBarButton Text="<u>R</u>eset Map" ToolTip="Reset Map" Value="ClearMap"
                                    ImageUrl="images/UI/mapclear.png" AccessKey="R" />
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarButton Text="<u>R</u>ecenter Map" ToolTip="Recenter Map" Value="Goto"
                                    ImageUrl="images/UI/recenter.png" AccessKey="g" />
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarDropDown ID="gotoDropDown" Text="<u>Z</u>ones">
                                </telerik:RadToolBarDropDown>
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarButton>
                                    <ItemTemplate>
                                        <telerik:RadComboBox ID="searchBox" AllowCustomText="True" runat="server" Width="160px"
                                            Height="100px" DataTextField="name" EmptyMessage="Search for Locations..."
                                            DataValueField="id" MarkFirstMatch="True"
                                            EnableLoadOnDemand="true" ShowMoreResultsBox="false" EnableVirtualScrolling="false" OnItemsRequested="searchBox_ItemRequested"
                                            OnClientSelectedIndexChanged="blue.controlHandler"
                                            OnClientDropDownClosed="blue.controlHandler" LoadingMessage="Searching..." Sort="Ascending" SortCaseSensitive="False">
                                        </telerik:RadComboBox>
                                    </ItemTemplate>
                                </telerik:RadToolBarButton>
                                <telerik:RadToolBarButton Text="<u>S</u>earch" ToolTip="Search" />
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarDropDown Text="Tools" ToolTip="Tools">
                                    <Buttons>
                                        <telerik:RadToolBarButton Text="Help" Value="Help" />
                                        <telerik:RadToolBarButton Text="Bluemaps site" Value="Bluemaps Site" />
                                    </Buttons>
                                </telerik:RadToolBarDropDown>
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarButton ImageUrl="images/UI/stop.png" ToolTip="Stop" Value="Stop" />
                                <telerik:RadToolBarButton ImageUrl="images/UI/pause.png" ToolTip="Pause" Value="Pause" />
                                <telerik:RadToolBarButton ImageUrl="images/UI/play.png" ToolTip="Play" Value="Play" />
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarDropDown Text="Map Types">
                                    <Buttons>
                                        <telerik:RadToolBarButton Text="Simple Map" Value="SimpleMap">
                                        </telerik:RadToolBarButton>
                                        <telerik:RadToolBarButton Text="StreetMap" Value="StreetMap">
                                        </telerik:RadToolBarButton>
                                        <telerik:RadToolBarButton Text="Terrain" Value="Terrain">
                                        </telerik:RadToolBarButton>
                                        <telerik:RadToolBarButton Text="Satellite" Value="Satellite">
                                        </telerik:RadToolBarButton>
                                    </Buttons>
                                </telerik:RadToolBarDropDown>
                                <telerik:RadToolBarButton IsSeparator="true" />
                                <telerik:RadToolBarButton>
                                    <ItemTemplate>
                                        <span id="statusLabel" class="status">Status:</span> <span id="status" class="status">
                                        </span>
                                    </ItemTemplate>
                                </telerik:RadToolBarButton>
                            </Items>
                        </telerik:RadToolBar>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="horozontalSplitBar" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="contentPane" runat="server">
                        <!-- Place the content of the pane here -->
                        <div id="mapCanvas" style="top: 0; left: 0; width: 100%; height: 100%" />
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <asp:XmlDataSource ID="locationsTreeDataSource" runat="server" DataFile="" XPath="locations/*" EnableCaching="False" EnableViewState="False"></asp:XmlDataSource>
    </form>

    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl/." : "http://www/.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>

    <script type="text/javascript">
        try {
            var pageTracker = _gat._getTracker("UA-8867808-1");
            pageTracker._trackPageview();
        } catch (err) { }</script>

</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Vesko
Top achievements
Rank 2
answered on 14 Oct 2009, 08:25 AM
What happens if you remove the Google maps API code?

Try monitoring the http traffic with Fiddler or Firebug and see where the delay comes from.
Tags
ComboBox
Asked by
Hilmi Alphan Ozturk
Top achievements
Rank 1
Answers by
Vesko
Top achievements
Rank 2
Share this question
or