Hi..
I want to load my page and then 5 seconds later fetch more data and display another grid. How do I use Ajax (I don't see the AjaxTimer) to fetch the data after 5 seconds and show the 'Loading' message using the loading panel.
thanks.. I'm using C#
I want to load my page and then 5 seconds later fetch more data and display another grid. How do I use Ajax (I don't see the AjaxTimer) to fetch the data after 5 seconds and show the 'Loading' message using the loading panel.
thanks.. I'm using C#
1 Answer, 1 is accepted
0
Kevin Babcock
Top achievements
Rank 1
answered on 25 Aug 2008, 04:03 AM
Hello Jon,
You can set a timeout function on the client to call a method 5 seconds after the page loads. You can then call a web service/method and use client-side data binding to load up your second RadGrid with its data. If you aren't sure how to use client-side data binding, I suggest you check out the RadTips episode where I cover this topic, or this online demo.
Here is a quick demo I came up with to get the functionality you are going for.
I hope this helps. If you have any further questions please don't hesitate to ask.
Regards,
Kevin Babcock
You can set a timeout function on the client to call a method 5 seconds after the page loads. You can then call a web service/method and use client-side data binding to load up your second RadGrid with its data. If you aren't sure how to use client-side data binding, I suggest you check out the RadTips episode where I cover this topic, or this online demo.
Here is a quick demo I came up with to get the functionality you are going for.
<%@ 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>Untitled Page</title> | |
</head> | |
<body> | |
<form id="form1" runat="server"> | |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" | |
EnablePageMethods="true" /> | |
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> | |
<script type="text/javascript"> | |
window.onload = function() { | |
setTimeout(getData, 5000); | |
} | |
function getData() { | |
$find('<%= RadAjaxLoadingPanel1.ClientID %>').show('<%= RadGrid2.ClientID %>'); | |
PageMethods.GetData(updateGrid); | |
} | |
function updateGrid(data) { | |
var tableView = $find('<%= RadGrid2.ClientID %>').get_masterTableView(); | |
tableView.set_dataSource(data); | |
tableView.dataBind(); | |
$find('<%= RadAjaxLoadingPanel1.ClientID %>').hide('<%= RadGrid2.ClientID %>'); | |
} | |
function RadGrid2_Command(sender, args) { | |
// intentionally left blank | |
} | |
</script> | |
</telerik:RadScriptBlock> | |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" | |
DefaultLoadingPanelID="RadAjaxLoadingPanel1"> | |
<AjaxSettings> | |
<telerik:AjaxSetting AjaxControlID="RadGrid1"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="RadGrid1" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
<telerik:AjaxSetting AjaxControlID="RadGrid2"> | |
<UpdatedControls> | |
<telerik:AjaxUpdatedControl ControlID="RadGrid2" /> | |
</UpdatedControls> | |
</telerik:AjaxSetting> | |
</AjaxSettings> | |
</telerik:RadAjaxManager> | |
<telerik:RadGrid ID="RadGrid1" runat="server" | |
OnNeedDataSource="RadGrid1_NeedDataSource"> | |
</telerik:RadGrid> | |
<telerik:RadGrid ID="RadGrid2" runat="server"> | |
<MasterTableView> | |
<Columns> | |
<telerik:GridBoundColumn DataField="Name" /> | |
<telerik:GridBoundColumn DataField="Age" /> | |
</Columns> | |
</MasterTableView> | |
<ClientSettings> | |
<ClientEvents OnCommand="RadGrid2_Command" /> | |
</ClientSettings> | |
</telerik:RadGrid> | |
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" | |
CssClass="LoadingPanel" | |
BackColor="White" | |
Transparency="20"> | |
<img id="imgLoading" | |
alt="Loading..." | |
src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' | |
style="border: 0px;" /> | |
</telerik:RadAjaxLoadingPanel> | |
</form> | |
</body> | |
</html> | |
using System.Collections.Generic; | |
using System.Web.Services; | |
public partial class _Default : System.Web.UI.Page | |
{ | |
protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e) | |
{ | |
var data = new List<Person> | |
{ | |
new Person { Name = "oe Smith", Age = 22 }, | |
new Person { Name = "Jane Doe", Age = 34 }, | |
new Person { Name = "Susan Jones", Age = 14 } | |
}; | |
RadGrid1.DataSource = data; | |
} | |
[WebMethod] | |
public static List<Person> GetData() | |
{ | |
// simulate network latency | |
System.Threading.Thread.Sleep(2000); | |
return new List<Person> | |
{ | |
new Person { Name = "oe Smith", Age = 22 }, | |
new Person { Name = "Jane Doe", Age = 34 }, | |
new Person { Name = "Susan Jones", Age = 14 } | |
}; | |
} | |
} | |
public class Person | |
{ | |
public string Name { get; set; } | |
public int Age { get; set; } | |
} | |
I hope this helps. If you have any further questions please don't hesitate to ask.
Regards,
Kevin Babcock