Grid / Virtual Scrolling and Paging

[Gagan Garg]

Hi Guys,

I want to implement Grid / Virtual Scrolling and Paging without Rad Ajax Manager. On the site of telerik all the demos made with the help of red Ajax Manager. But i have a constraint i cannt use rad ajax manager. i am  using script manager of ajax.

How to implement Grid / Virtual Scrolling and Paging with script manager?????????

Thanks in advance.


Please do reply ASAP.

[Gagan Garg]

Hi Guys,
I am waiting your responses/suggestions.

I have implemented a sample but  this sample is not working properly. This sample is developed under Asp.net3.5 and Telerik controls Q2 2009 NET3.5.

My final goal is to implement the google style scrolling. when i run this sample i get an error message "Microsoft JScript runtime error: Object doesn't support this property or method" in Script given below. If anyone have the idea how to resolve this error
Please give your feedbacks.

if

 

(currentlyDisplayedRecords < 100) {

 

window[

"<%= RadGrid2.ClientID %>"].AjaxRequest("<%= RadGrid2.UniqueID %>", "LoadMoreRecords");

 

}

ASPX code 

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

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>Demo Rad Grid Virtual Scrolling and Paging</title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<script type="text/javascript">

 

 

function HandleScrolling(e) {

 

 

var grid = $find("<%=RadGrid2.ClientID %>");

 

 

var scrollArea = document.getElementById("<%= RadGrid2.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) {

 

window[

"<%= RadGrid2.ClientID %>"].AjaxRequest("<%= RadGrid2.UniqueID %>", "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;

 

}

 

</script>

 

 

<div>

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

 

<telerik:RadGrid ID="RadGrid2" AllowSorting="true" runat="server" AllowPaging="true"

 

 

PageSize="15" Width="97%" DataSourceID="SqlDataSource1" >

 

 

<PagerStyle Visible="false" />

 

 

<MasterTableView Width="100%" TableLayout="Fixed" />

 

 

<ClientSettings>

 

 

<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true"/>

 

 

<ClientEvents OnScroll="HandleScrolling" />

 

 

</ClientSettings>

 

 

</telerik:RadGrid>

 

 

</div>

 

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Leave_EBIMSConnectionString %>"

 

 

SelectCommand="SELECT [CMP_ID], [CMP_Name] FROM [Cms_Company]"></asp:SqlDataSource>

 

 

</form>

 

</

 

body>

 

</

 

html>


ASPX.cs Code

 

using

 

System;

 

 

 

using

 

System.Collections.Generic;

 

 

 

using

 

System.Linq;

 

 

 

using

 

System.Web;

 

 

 

using

 

System.Web.UI;

 

 

 

using

 

System.Web.UI.WebControls;

 

 

 

public

 

partial class _Default : System.Web.UI.Page

 

{

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

}

 

protected override void RaisePostBackEvent(System.Web.UI.IPostBackEventHandler source, string eventArgument)

 

{

 

base.RaisePostBackEvent(source, eventArgument);

 

 

if (source == this.RadGrid2 && eventArgument == "LoadMoreRecords")

 

{

RadGrid2.PageSize = 10 + RadGrid2.PageSize;

RadGrid2.Rebind();

}

}

}

 

[Yavor]

Hello Gagan,

 You are not required to use ajax, in order to handle the scroll paging. Below is an example setup:

.aspx

<telerik:RadGrid ID="RadGrid1" runat="server" Width="97%" AllowPaging="True" PageSize="14"
         AllowSorting="True" AllowCustomPaging="true" VirtualItemCount="100000" OnColumnCreated="RadGrid1_ColumnCreated"
         OnNeedDataSource="RadGrid1_NeedDataSource">
         <PagerStyle Mode="NumericPages" />
         <MasterTableView TableLayout="Fixed" />
         <ClientSettings>
             <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True"
                 SaveScrollPosition="True"></Scrolling>
         </ClientSettings>
     </telerik:RadGrid>

.cs

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
   {
       RadGrid1.DataSource = GetDataTable("SELECT [OrderID], [ProductID], [Quantity], [Discount] FROM [LargeOrderDetails] WHERE ID BETWEEN " + ((RadGrid1.CurrentPageIndex * RadGrid1.PageSize) + 1) + " AND " + ((RadGrid1.CurrentPageIndex + 1) * RadGrid1.PageSize));
   }
   protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
   {
       if (e.Column is GridBoundColumn)
       {
           e.Column.HeaderStyle.Width = Unit.Percentage(24);
       }
   }
   private DataTable GetDataTable(String queryString)
   {
       String ConnString = ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString;
       SqlConnection MySqlConnection = new SqlConnection(ConnString);
       SqlDataAdapter MySqlDataAdapter = new SqlDataAdapter();
       MySqlDataAdapter.SelectCommand = new SqlCommand(queryString, MySqlConnection);
       DataTable myDataTable = new DataTable();
       MySqlConnection.Open();
       try
       {
           MySqlDataAdapter.Fill(myDataTable);
       }
       finally
       {
           MySqlConnection.Close();
       }
       return myDataTable;
   }

This sample will perform a standard postback, when new items are needed, and the page is changed.
I hope this information helps.

Kind regards,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.