This is a migrated thread and some comments may be shown as answers.

Ajax Timer - Load more data and show AjaxLoading Panel

1 Answer 95 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 24 Aug 2008, 02:28 PM
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#

1 Answer, 1 is accepted

Sort by
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.

<%@ 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 { getset; } 
    public int Age { getset; } 
 




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

Regards,
Kevin Babcock
Tags
Ajax
Asked by
Jon
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
Share this question
or