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

Ajax Timer - Load more data and show AjaxLoading Panel

1 Answer 179 Views

Ajax

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

1 Answer, 1 is accepted

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