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
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