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:
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="&nbsp;" HeaderText="Title" |
AllowFiltering="False" SortExpression="Title" > |
</custom:MyCustomFilteringColumn> |
<custom:MyCustomFilteringColumn UniqueName="Fname" DataField="Fname" EmptyDataText="&nbsp;" HeaderText="Fname" |
SortExpression="Fname"> |
</custom:MyCustomFilteringColumn> |
<custom:MyCustomFilteringColumn UniqueName="Mname" DataField="Mname" EmptyDataText="&nbsp;" HeaderText="Mname" |
SortExpression="Mname"> |
</custom:MyCustomFilteringColumn> |
<custom:MyCustomFilteringColumn UniqueName="Sname" DataField="Sname" EmptyDataText="&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> |