Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Grid Hanging IE works fine with FF

1 Answer 35 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RAkesh
Top achievements
Rank 1
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> 
 



1 Answer, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 20 Nov 2008, 12:42 PM
Hi RAkesh,

Could you please tell us more about your scenario? How many records do you load at a time? And does it makes any difference if your replace the current grid columns with GridBoundColumns? Any further information you can provide can help up get to the source of the issue.

Let me know how it goes.

All the best,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
RAkesh
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Share this question
or