Ajax Timer - Load more data and show AjaxLoading Panel

2 posts, 0 answers
  1. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 24 Aug 2008 Link to this post

    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#

  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 24 Aug 2008 Link to this post

    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.

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" 
    14             EnablePageMethods="true" /> 
    15              
    16         <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    17             <script type="text/javascript"
    18                 window.onload = function() {                     
    19                     setTimeout(getData, 5000); 
    20                 } 
    21  
    22                 function getData() { 
    23                     $find('<%= RadAjaxLoadingPanel1.ClientID %>').show('<%= RadGrid2.ClientID %>'); 
    24                     PageMethods.GetData(updateGrid); 
    25                 } 
    26  
    27                 function updateGrid(data) { 
    28                     var tableView = $find('<%= RadGrid2.ClientID %>').get_masterTableView(); 
    29                     tableView.set_dataSource(data); 
    30                     tableView.dataBind(); 
    31                     $find('<%= RadAjaxLoadingPanel1.ClientID %>').hide('<%= RadGrid2.ClientID %>'); 
    32                 } 
    33  
    34                 function RadGrid2_Command(sender, args) { 
    35                      // intentionally left blank 
    36                 } 
    37             </script> 
    38         </telerik:RadScriptBlock> 
    39          
    40         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  
    41             DefaultLoadingPanelID="RadAjaxLoadingPanel1"
    42             <AjaxSettings> 
    43                 <telerik:AjaxSetting AjaxControlID="RadGrid1"
    44                     <UpdatedControls> 
    45                         <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
    46                     </UpdatedControls> 
    47                 </telerik:AjaxSetting> 
    48                 <telerik:AjaxSetting AjaxControlID="RadGrid2"
    49                     <UpdatedControls> 
    50                         <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
    51                     </UpdatedControls> 
    52                 </telerik:AjaxSetting> 
    53             </AjaxSettings>          
    54         </telerik:RadAjaxManager> 
    55          
    56         <telerik:RadGrid ID="RadGrid1" runat="server" 
    57             OnNeedDataSource="RadGrid1_NeedDataSource"
    58         </telerik:RadGrid> 
    59          
    60         <telerik:RadGrid ID="RadGrid2" runat="server"
    61             <MasterTableView> 
    62                 <Columns> 
    63                     <telerik:GridBoundColumn DataField="Name" /> 
    64                     <telerik:GridBoundColumn DataField="Age" /> 
    65                 </Columns> 
    66             </MasterTableView> 
    67             <ClientSettings> 
    68                 <ClientEvents OnCommand="RadGrid2_Command" /> 
    69             </ClientSettings> 
    70         </telerik:RadGrid> 
    71          
    72         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
    73             CssClass="LoadingPanel" 
    74             BackColor="White" 
    75             Transparency="20"
    76             <img id="imgLoading"  
    77                 alt="Loading..."  
    78                 src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
    79                 style="border: 0px;" /> 
    80         </telerik:RadAjaxLoadingPanel> 
    81              
    82     </form> 
    83 </body> 
    84 </html> 
    85  

    1 using System.Collections.Generic; 
    2 using System.Web.Services; 
    3  
    4 public partial class _Default : System.Web.UI.Page 
    5
    6     protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e) 
    7     { 
    8         var data = new List<Person> 
    9         { 
    10             new Person { Name = "oe Smith", Age = 22 }, 
    11             new Person { Name = "Jane Doe", Age = 34 }, 
    12             new Person { Name = "Susan Jones", Age = 14 } 
    13         }; 
    14  
    15         RadGrid1.DataSource = data;              
    16     } 
    17  
    18     [WebMethod] 
    19     public static List<Person> GetData() 
    20     { 
    21         // simulate network latency 
    22         System.Threading.Thread.Sleep(2000); 
    23                  
    24         return new List<Person> 
    25         { 
    26             new Person { Name = "oe Smith", Age = 22 }, 
    27             new Person { Name = "Jane Doe", Age = 34 }, 
    28             new Person { Name = "Susan Jones", Age = 14 } 
    29         }; 
    30     } 
    31
    32  
    33 public class Person 
    34
    35     public string Name { getset; } 
    36     public int Age { getset; } 
    37
    38  




    I hope this helps. If you have any further questions please don't hesitate to ask.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top