or
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using Telerik.Web.UI;
using System.Web.UI.WebControls;
public partial class RadPanelDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
CustomContentTemplate1 template1= new CustomContentTemplate1();
CustomContentTemplate2 template2 = new CustomContentTemplate2();
if (IsPostBack)
{
lblpost.Text = "OnPostBack";
}
foreach (RadPanelItem item in RadPanelBar1.Items)
{
if (IsPostBack)
{
Response.Write("post");
item.ContentTemplate = new CustomContentTemplate2();
template2.InstantiateIn(item);
item.DataBind();
}
else
{
Response.Write("load");
item.ContentTemplate = new CustomContentTemplate1();
template1.InstantiateIn(item);
item.DataBind();
}
}
ajaxmanager1.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(ajaxmanager1_AjaxRequest);
}
void ajaxmanager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
Response.Write(e.Argument);
}
}
class CustomContentTemplate1 : ITemplate
{
public void InstantiateIn(Control container)
{
Label label1 = new Label();
label1.Font.Bold = true;
label1.DataBinding += new EventHandler(label1_DataBinding);
container.Controls.Add(label1);
}
private void label1_DataBinding(object sender, EventArgs e)
{
Label target = (Label)sender;
RadPanelItem item = (RadPanelItem)target.BindingContainer;
target.Text ="load";
//Alternative way:
//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;
}
}
class CustomContentTemplate2 : ITemplate
{
public void InstantiateIn(Control container)
{
Label label1 = new Label();
label1.Font.Bold = true;
label1.DataBinding += new EventHandler(label1_DataBinding);
container.Controls.Add(label1);
}
private void label1_DataBinding(object sender, EventArgs e)
{
Label target = (Label)sender;
RadPanelItem item = (RadPanelItem)target.BindingContainer;
target.Text = "post";
//Alternative way:
//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;
}
}
class CustomContentTemplate3 : ITemplate
{
public void InstantiateIn(Control container)
{
Label label1 = new Label();
label1.Font.Bold = true;
label1.DataBinding += new EventHandler(label1_DataBinding);
container.Controls.Add(label1);
}
private void label1_DataBinding(object sender, EventArgs e)
{
Label target = (Label)sender;
RadPanelItem item = (RadPanelItem)target.BindingContainer;
target.Text = item.Value;
//Alternative way:
//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;
}
}
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadPanelDemo.aspx.cs" Inherits="RadPanelDemo" %>
<%@ 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
></
title
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function OnClientItemExpand(sender, args) {
$find("<%=ajaxmanager1.ClientID%>").ajaxRequest("arguments");
}
</
script
>
</
telerik:RadCodeBlock
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadAjaxManager
ID
=
"ajaxmanager1"
runat
=
"server"
EnableAJAX
=
"true"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadPanelBar1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadPanelBar1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
div
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
</
telerik:RadScriptManager
>
<
table
width
=
"100%"
>
<
tr
style
=
"width:100%"
>
<
td
style
=
"width:100%"
>
<%-- <
telerik:RadAjaxPanel
ID
=
"panel1"
runat
=
"server"
EnableAJAX
=
"true"
>--%>
<
telerik:RadPanelBar
ID
=
"RadPanelBar1"
onclientitemexpand
=
"OnClientItemExpand"
ExpandMode
=
"FullExpandedItem"
Width
=
"100%"
runat
=
"server"
>
<
Items
>
<
telerik:RadPanelItem
runat
=
"server"
Text
=
"Root RadPanelItem1"
PostBack
=
"true"
Value
=
"A"
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
runat
=
"server"
Text
=
"Root RadPanelItem2"
Value
=
"B"
>
</
telerik:RadPanelItem
>
<
telerik:RadPanelItem
runat
=
"server"
Text
=
"Root RadPanelItem3"
Value
=
"C"
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
<%-- </
telerik:RadAjaxPanel
>--%>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
asp:Button
ID
=
"post"
Text
=
"PostBack"
runat
=
"server"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
asp:Label
ID
=
"lblpost"
Text
=
"Load"
runat
=
"server"
></
asp:Label
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
form
>
</
body
>
</
html
>
<
telerik:RadNumericTextBox
CssClass
=
"FarmSerialNumber"
ID
=
"rntbAcreageFarmSerialNumber"
runat
=
"server"
Width
=
"40px"
Value='<%# DoubleFromDb(Eval("FarmSerialNumber"), true) %>'
ReadOnly='<%# DoubleFromDb(Eval("FarmSerialNumber"), true) != null %>' MinValue="1">
<
NumberFormat
DecimalDigits
=
"0"
GroupSeparator
=
""
/>
<
IncrementSettings
InterceptMouseWheel
=
"false"
/>
<
ReadOnlyStyle
ForeColor
=
"Gray"
></
ReadOnlyStyle
>
<
ClientEvents
OnValueChanged
=
"radNumericTextBox_ClientValueChanged"
OnFocus
=
"acreageControl_ClientFocus"
/>
</
telerik:RadNumericTextBox
>
<
input
type
=
"text"
onfocus
=
"alert('Yup. Works')"
readonly
=
"readonly"
/>
I am using the scrolling functionality of the grid in order to load more records if the user scrolls to the bottom of the page.I have taken the examples from the site and changed the data source. Now when I scroll to the end the grid does not show the additional records. In the code behind AjaxRequest I can see that the page size is increasing every time i reach the bottom of the page but no loader image shows up and the grid does not show the additional records.
Here is the code
Thank you
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
RadGrid1.PageSize = 15 + RadGrid1.PageSize;
RadGrid1.Rebind();
}
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"HeaderContent"
runat
=
"server"
ContentPlaceHolderID
=
"HeadContent"
>
</
asp:Content
>
<
asp:Content
ID
=
"BodyContent"
runat
=
"server"
ContentPlaceHolderID
=
"MainContent"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
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 visible items are less than the entire record count
//trigger an ajax request to increase them
if (currentlyDisplayedRecords <
100
)
{ $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords"); }
}
}
//calculate when the scroll bar is at the bottom
function IsScrolledToBottom(scrollArea) {
var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
return currentPosition == scrollArea.scrollHeight;
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
OnAjaxRequest
=
"RadAjaxManager1_AjaxRequest"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
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"
DataSourceID
=
"SqlDataSource1"
AllowSorting
=
"True"
AllowPaging
=
"True"
PageSize
=
"15"
Width
=
"97%"
GridLines
=
"None"
>
<
PagerStyle
Visible
=
"False"
/>
<
MasterTableView
Width
=
"99%"
TableLayout
=
"Fixed"
CommandItemDisplay
=
"None"
CurrentResetPageIndexAction
=
"SetPageIndexToFirst"
DataSourceID
=
"SqlDataSource1"
PageSize
=
"15"
>
</
MasterTableView
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
ScrollHeight
=
"100px"
/>
<
ClientEvents
OnScroll
=
"HandleScrolling"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:DBConnection %>"
SelectCommand="SELECT DisplayName FROM SP_Messages"></
asp:SqlDataSource
>
</
asp:Content
>
<telerik:RadGrid ID="RadGrid1" runat="server" Width="700px" AllowSorting="true" AllowPaging="true"
pagesize= "10" AutoGenerateColumns="false" OnItemCreated="g_ItemCreated">
<MasterTableView AllowNaturalSort="true" DataKeyNames="parm_id" AllowAutomaticUpdates="false" EditMode="InPlace" >
<Columns>
<telerik:GridBoundColumn DataField="id" UniqueName="ID" HeaderText="ID"
ItemStyle-Width="200px" AllowSorting="true" ShowSortIcon="true" SortExpression="ID asc" ReadOnly="true" Display = "false"/>
<telerik:GridBoundColumn DataField="name" UniqueName="Name" HeaderText="Name"
ItemStyle-Width="200px" AllowSorting="true" ShowSortIcon="true" SortExpression="Name asc" ReadOnly="true" />
<telerik:GridNumericColumn
DataField="Score"
DataType="System.Int32"
HeaderText="Score"
UniqueName="Score"
>
</telerik:GridNumericColumn>
<telerik:GridCheckBoxColumn UniqueName="ActiveFlag" HeaderText="Is Active" DataField = "active_flag" />
<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" HeaderText="">
</telerik:GridEditCommandColumn>
</Columns>
</MasterTableView>
<ClientSettings >
<ClientEvents OnDataBinding="OnDataBinding" OnRowDataBound="OnRowDataBound" />
<DataBinding Location="WcfDataService1.svc" >
<DataService TableName="Student" />
</DataBinding>
</ClientSettings>
</telerik:RadGrid>
Someone could help me? Thanks in advance.