This is a migrated thread and some comments may be shown as answers.
[Solved] Grid Hanging IE works fine with FF

1 Answer 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RAkesh asked on 17 Nov 2008, 04:11 PM
Hi,
Please treat this thread as urgent since I've to gather a demo so we can put and order for telerik by end of this week max.
I was trying my hands on RadGrid when I came across this problem where when I'm scrolling entire grid hangs. Please find the entire code attached below for HTML markup:
    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
             <%@ Register Namespace="MyStuff" TagPrefix="custom" %>   
        
            <%@ 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>Untitled Page</title> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                        <!-- 
        
                        function HandleScrolling(e) 
        
                        { 
        
                          var grid = $find("<%=RadGrid1.ClientID %>"); 
        
                          var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData"); 
        
                          if(IsScrolledToBottom(scrollArea)) 
        
                          { 
        
                            var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1); 
        
                            //if the presently visible items are less than the entire source records count 
        
                            //trigger an ajax request to increase them 
        
                            if(currentlyDisplayedRecords < 100) 
        
                            { 
        
                              $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords"); 
        
                            } 
        
                          } 
        
                        } 
        
                        //this method calculates whether you have reached the bottom when dragging the vertical grid scroll 
        
                        function IsScrolledToBottom(scrollArea) 
        
                        { 
        
                            var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight; 
        
                            return currentPosition == scrollArea.scrollHeight; 
        
                        } 
        
                        function GetSelectedItems() 
        
                        { 
        
                            alert($find("<%= RadGrid1.MasterTableView.ClientID %>").get_selectedItems().length); 
        
                        }  
        
                        function OnClientItemsRequesting(sender, args) 
        
                           { 
        
                               if(sender.GetText().length < 1) 
        
                               { 
        
                                   return false; 
        
                               } 
        
                               else 
        
                               { 
        
                                   sender.ClearItems(); 
        
                               } 
        
                           }                         
        
                        --> 
        
                    </script> 
        
                </telerik:RadCodeBlock>             
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel2"/> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <table width="100%" border="0"> 
        
                        <tr> 
        
                            <td style="width:100%;"> 
        
                                <table width="100%"> 
        
                                    <tr> 
        
                                        <td> 
        
                                            <asp:Label ID="Label1" runat="server" Text="Worklist Type"></asp:Label> 
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" 
        
                                                Skin="Black"> 
        
                                                <Items> 
        
                                                    <telerik:RadComboBoxItem runat="server" Text="Some Value 1" Value="1" /> 
        
                                                    <telerik:RadComboBoxItem runat="server" Text="Some Value 6" 
        
                                                        Value="6" />                                        
        
                                                </Items> 
        
                                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                            </telerik:RadComboBox> 
        
                                        </td> 
        
                                        <td> 
        
                                            Location</td> 
        
                                        <td> 
        
                                            <telerik:RadComboBox ID="RadComboBox2" runat="server" Skin="Sunset"> 
        
                                                <Items> 
        
                                                    <telerik:RadComboBoxItem runat="server" Text="College" Value="COL" />                                         
        
                                                </Items> 
        
                                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                            </telerik:RadComboBox> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </td> 
        
                        </tr> 
        
                        <tr>                 
        
                            <td style="width:100%;">                 
        
                                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25" > 
        
                                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" /> 
        
                                </telerik:RadAjaxLoadingPanel>                 
        
                                <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" 
        
                                    AllowSorting="True"  
        
                                    AllowPaging="true"  
        
                                    ShowFooter="true"  
        
                                    DataSourceID="SqlDataSource1"  
        
                                    PageSize="100"  
        
                                    Skin="Web20" 
        
                                    width="100%" 
        
                                    OnItemCommand="RadGrid1_ItemCommand"                          
        
                                    AutoGenerateColumns="False"  
        
                                    VirtualItemCount="10000"                         
        
                                    OnColumnCreating="RadGrid1_ColumnCreating"  
        
                                    OnNeedDataSource="RadGrid1_NeedDataSource"> 
        
                                    <ClientSettings AllowKeyboardNavigation="true">                             
        
                                        <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True"> 
        
                                         </Scrolling> 
        
                                         <ClientEvents OnScroll="HandleScrolling" /> 
        
                                         <Selecting AllowRowSelect="True" /> 
        
                                    </ClientSettings> 
        
                                    <SortingSettings SortedBackColor="BurlyWood" /> 
        
                                    <MasterTableView AllowNaturalSort="False" AllowSorting="False" DataKeyNames="Patient_id" DataSourceID="SqlDataSource1" > 
        
                                        <RowIndicatorColumn> 
        
                                            <HeaderStyle Width="20px" /> 
        
                                        </RowIndicatorColumn> 
        
                                        <ExpandCollapseColumn> 
        
                                            <HeaderStyle Width="20px" /> 
        
                                        </ExpandCollapseColumn> 
        
                                        <Columns>                                                  
        
                                            <custom:MyCustomFilteringColumn UniqueName="Title" DataField="Title" EmptyDataText="&amp;nbsp;" HeaderText="Title" 
        
                                                AllowFiltering="False" SortExpression="Title" > 
        
                                            </custom:MyCustomFilteringColumn> 
        
                                            <custom:MyCustomFilteringColumn UniqueName="Fname" DataField="Fname" EmptyDataText="&amp;nbsp;" HeaderText="Fname" 
        
                                                SortExpression="Fname"> 
        
                                            </custom:MyCustomFilteringColumn> 
        
                                            <custom:MyCustomFilteringColumn UniqueName="Mname" DataField="Mname" EmptyDataText="&amp;nbsp;" HeaderText="Mname" 
        
                                                SortExpression="Mname"> 
        
                                            </custom:MyCustomFilteringColumn> 
        
                                            <custom:MyCustomFilteringColumn  UniqueName="Sname"  DataField="Sname" EmptyDataText="&amp;nbsp;" HeaderText="Sname" 
        
                                                SortExpression="Sname"> 
        
                                            </custom:MyCustomFilteringColumn>                                
        
                                        </Columns> 
        
                                    </MasterTableView> 
        
                                    <HeaderStyle Width="200px" /> 
        
                                    <PagerStyle Mode="Slider" /> 
        
                                    <SelectedItemStyle BackColor="#FFC0C0" /> 
        
                                    <FilterMenu EnableTheming="True" Skin="Vista"> 
        
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                    </FilterMenu> 
        
                                </telerik:RadGrid> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
             <asp:Button ID="clrFilters" runat="server" Text="Clear filters" CssClass="button" 
        
                        OnClick="clrFilters_Click"></asp:Button> 
        
                </div>      
        
                </form> 
        
            </body> 
        
            </html>
[Solved] Grid Hanging IE works fine with FF

1 Answer, 1 is accepted
