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

using Ajax controls slows down considerably with IE

1 Answer 26 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 21 Nov 2013, 10:31 AM
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

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 26 Nov 2013, 07:01 AM
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.
Tags
Ajax
Asked by
David
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or