using Ajax controls slows down considerably with IE

2 posts, 0 answers
  1. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 21 Nov 2013 Link to this post

    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

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 26 Nov 2013 Link to this post

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