using Ajax controls slows down considerably with IE

[David]

I have a scenario where i am using a RadCombobox to filter the DataSource for an asp.net Repeater.
i will try my best to explain what is happening first, with the code snippets below the explanation.


so the way the code works, is that every time someone types something in the combobox, it will fire the 'onKeyUp' attribute which calls the 'handleKeyPress' javascript method.
this method will call the 'InitiateAjaxRequest' javascript method after its done a few bits of checking.

the 'InitiateAjaxRequest' javascript method will merely call the AjaxRequest which will call the vb.net method 'ajxMan_AjaxRequest'. This will rebind the Repeater with the information i want to show.

when testing on localhost, i can type in the box as fast as i like and it works brilliantly. it doesn't matter what Browser i use.
when i upload it to my testing server, it works fine on Chrome and Safari but IE 11 (and 10, 9 & 8) cannot handle me typing so fast. it ends up looking like its not doing anything but after awhile (anything up to a couple of minutes) it will bring back the data i am expecting. if i type 1 or 2 characters at a time, the Repeater will refresh correctly. typing at least 4 or 5 characters  in quick succession, with no pause, causes the hanging.
i found a piece of code that allows  the code within 'handleKeyPress' to run if no keys have been pressed for 1 second, and this solves the problem but the pause is not really acceptable to me.

is there anything obvious that i am doing wrong, or anything i can do to resolve this? i would like the Repeater to be rebound with minimal pause between the typing and the stopping-typing.

the combobox is declared in the aspx.vb code:

Protected cmb As New RadComboBox

 

private sub buildCombobox

 

      cmb = New RadComboBox

        cmb.ID = "cmbSearch"

        cmb.ShowDropDownOnTextboxClick = False

        cmb.OnClientLoad = "firstItemEmptyOnLoad"

        cmb.MarkFirstMatch = True

        cmb.DataTextField = "StockItemName"

        cmb.DataValueField = "StockItemID"

        cmb.ShowToggleImage = False
cmb.Attributes("onkeyup") = "handleKeyPress();"


        Master.Menubar.Add(cmb)

 

       If Not Page.IsPostBack Then
            cmb.DataSource = _recipe.getItems(ID, DivisionId)
            ViewState("cmbDataSource") = cmb.DataSource
            cmb.DataBind()
        End If

end sub

I have the following in the aspx:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
       <telerik:RadAjaxManager ID="ajxMan2" runat="server" OnAjaxRequest="ajxMan_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ajxMan2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="100">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

 <asp:Repeater ID="r2" runat="server"  >
                <HeaderTemplate>
                    <table class="grid" >
                        <tr class="gridHeader">
                            <th>
                                Stock Item</th>
                            <th>
                                Stock Size Group</th>
                                <th>
                                Batch
                            </th>
                            <th>
                                Can Order</th>

                            <th>
                                Stock Count</th>
                            <th>
                                Non Inventory</th>
                            <th>
                                Is Active</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr class='gridRow' onmouseover="this.className+=' gridRowOn'" onmouseout="this.className=this.className.replace(' gridRowOn','')"

                        onclick="window.location='StockItemAddEdit.aspx?StockItemID=<%#DirectCast(Container.DataItem, System.Data.DataRow)("StockItemID")%>'">
                        <td>

                            <%#DirectCast(Container.DataItem,System.Data.DataRow)("StockItemName").ToString %>
                        </td>
                        <td>

                            <%#DirectCast(Container.DataItem, System.Data.DataRow)("StockSizeGroupName").ToString%>
                        </td>
                        <td>
                            <asp:CheckBox ID="chkBatch" runat=server Enabled=false />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkCanOrder" runat=server Enabled=false />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkStockCount" runat=server Enabled=false  />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkNonInventory" runat=server Enabled=false  />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkIsActive" runat=server Enabled=false  />
                        </td>

                        <td><asp:Label runat="server" Visible="false" id="lblBatch" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("BatchItemYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblCanOrder" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("CanOrderYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblStockCount" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("StockCountYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblNonInventory" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("NonInventoryYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblIsActive" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("ActiveYN")%>'></asp:Label></td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <tr class='gridRowAlt' onmouseover="this.className+=' gridRowOn'" onmouseout="this.className=this.className.replace(' gridRowOn','')"

                         onclick="window.location='StockItemAddEdit.aspx?StockItemID=<%#DirectCast(Container.DataItem, System.Data.DataRow)("StockItemID")%>'">
                        <td>

                            <%#DirectCast(Container.DataItem, System.Data.DataRow)("StockItemName").ToString%>

                        </td>
                        <td>

                            <%#DirectCast(Container.DataItem, System.Data.DataRow)("StockSizeGroupName").ToString%>
                        </td>
                         <td>
                            <asp:CheckBox ID="chkBatch" runat=server Enabled=false  />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkCanOrder" runat=server Enabled=false />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkStockCount" runat=server Enabled=false />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkNonInventory" runat=server Enabled=false  />
                        </td>
                        <td>
                            <asp:CheckBox ID="chkIsActive" runat=server Enabled=false  />
                        </td>

                        <td><asp:Label runat="server" Visible="false" id="lblBatch" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("BatchItemYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblCanOrder" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("CanOrderYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblStockCount" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("StockCountYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblNonInventory" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("NonInventoryYN")%>'></asp:Label></td>
                        <td><asp:Label runat="server" Visible="false" id="lblIsActive" Text='<%#DirectCast(Container.DataItem, System.Data.DataRow)("ActiveYN")%>'></asp:Label></td>
                    </tr>
                </AlternatingItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>

            <asp:HiddenField  runat="server" ID="hidAutoComplete" />


            </telerik:RadAjaxPanel>
</telerik:RadCodeBlock>

and a javascript function like this:

function handleKeyPress()
    {



      var combo = $find('<%=cmb.ClientID%>');
      //  alert('handleKeyPress');
      var filtText =  String(combo._filterText);
      var fullText = String(combo.get_text());
      var actualFilterText = '';

      for (var i = 0,len = filtText.length; i < len; i++){

          if (filtText[i].toUpperCase() == fullText[i].toUpperCase()){
              actualFilterText += filtText[i];
          }else{
              break;
          }

      }


      document.getElementById('<%=hidAutoComplete.ClientID%>').value = actualFilterText;
        InitiateAjaxRequest();
    //  <%'=Page.ClientScript.GetPostBackEventReference(hidAutoComplete, "Change")%>
        // alrt('error');


    }



    function InitiateAjaxRequest(arguments) {
       // alert('InitiateAjaxRequest');
        var ajaxManager = $find("<%= ajxMan2.ClientID%>");
        ajaxManager.ajaxRequest(arguments);

    }

when the AjaxRequest gets fired, it will run the following code in the aspx.vb

Protected Sub ajxMan_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)


        'share the same datasource as the combobox, but filter it
        Dim dt As DataTable = DirectCast(ViewState("cmbDataSource"), DataTable)

        Using dt
            r2.DataSource = dt.Select("StockItemName LIKE '" + hidAutoComplete.Value + "%'")

            r2.DataBind()

            r.Visible = False
            r2.Visible = True


        End Using




End Sub

[Angel Petrov]

Hi David,

The problem in this scenario is that for a short amount of time multiple request are send to the server. The page needs to recreated accordingly and this is taking some time. What I can suggest is to replace the repeater with a control which supports client-side data-biding and instead of making a round trip to the server call a web service and bind the returned result to the control. By following this approach you will avoid the execution of the server-side life cycle. Another option for you would be to execute the AJAX request by subscribing to the OnClientTextChange event of the combo. Note however that this event is fired once the entire text is entered and the focus is moved outside the combo.

Also I noticed that the page uses both a RadAjaxManager and RadAjaxPanel for ajaxifying the same content. Note that this is not supported and you should use only one of the mentioned controls for ajaxification. More information on this matter is available here. 

Regards,
Angel Petrov
Telerik