Delay Load on RadGrid

18 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    May 2009

    Posted 27 Oct 2009 Link to this post

    I am testing the ajax controls for a possible migration and I have a couple of doubts about the radgrid and raddosck

    We are developing a dashboard screen that displays a differents panels. Some of the panels display charts and graphs, while others contain tables with aggregated data.

    There is a lot of information being displayed on this page.

    We want delay loads for each panels instead of waiting until all of the data for all of the panels has been processed before serving the page.

    We´re using SqlDataSource to provide all the data, not webservice.

    Now we use GridView a litle trick http://mattberseth.com/blog/2007/07/delay_load_an_updatepanel.html

    Can we do this with radgrid and raddosck?

    Thanks in advance


    David
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 30 Oct 2009 Link to this post

    Hello David,

    Implementing late loading with RadControls is quite straightforward. I have created a small web page to demonstrate this with RadGrid. Note that I use a RadAjaxManager AJAX-ifying my LatePanel, so that I can use the manager's client API to invoke a rebinding of the grid. No hidden buttons are necessary for making an asynchronous callback.

    Additionally, I use RadGrid's NeedDataSource event to bind my grid, but if you notice, I do not initially bind it. Thus, I have it load empty (and fast), as I will be rebinding it after postback.

    Greetings,
    Veli
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    5 posts
    Member since:
    May 2009

    Posted 30 Oct 2009 Link to this post

    That's just what I wanted to know.

    Thanks Veli
  5. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 03 May 2010 Link to this post

    Does this still work with the newest version of telerik controls and ASP.net 4.0?

    I have a web page I want to use some type of delay loading so the page loads and the grid is displayed and the user can then see the ajax loading panel overtop the grid while the grid is loading data. The data source is not all that large but it is a complex sql query which take 45-60 seconds to generate the data.

    I tried the code for the sample and my page loads fast but the data is never displayed in the grid? If I remove the ispostback check from the needdatasource function then my grid and data load fine but of course the whole page doesnt load until the grid data is loaded. When debugging the page all the functions are properly called including the needdatasource with the ispostback set to true and it returned my datatable after about 45-60 seconds, than is does radgrid.datasource = datatable and that is it, but visually the data never apears in the radgrid?

    Any ideas. thanks

    Jason
  6. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 04 May 2010 Link to this post

    Hello Jason,

    The example is verified to be working with the latest version of RadGrid. Check your AJAX settings. You can note in the example I have AJAX setting where the update panel is AJAX-ified by both itself and the AJAX manager! This is required, because the AJAX manager itself initiates the late update request from javascript. So, the grid panel updates itself on AJAX callbacks, but the AJAX manager loads the data into the panel after first page load.

    Greetings,
    Veli
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 04 May 2010 Link to this post

    Yeah actually not sure what I did wrong the first time, but it works fine now.


    This is not a big deal but is there a way to get the grid to display the command header, column headers and pager row, on the initial page load (before the data has been loaded)?

    Thanks
    Jason
  8. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 05 May 2010 Link to this post

    Hello Jason,

    Yes, you can display the command item and page header on initial load. To do this, you need to databind your grid on initial load, but to an empty data collection. So, if you are binding to a, say, DataTable, your DataTable should have all the columns, but no  rows. Alternatively, if you are binding to some custom collection, you need to pass the collection as the DataSource, though empty (no items). This will have the grid create its columns and show the header and command item. In the same scenario, setting RadGrid.PagerStyle.AlwaysVisible = true will have the grid always display the pager item too.

    All the best,
    Veli
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Ned
    Ned avatar
    1 posts
    Member since:
    Sep 2008

    Posted 26 May 2010 Link to this post

    Hi Veli!

    I was able to implement this with a single grid, but is there a way to do it with multiple grids?

    My situation is:

    I have about 10 grids on a page and a few take a bit longer than others. I'd like them to display when each one is finished instead of waiting until they all finish. Currently they all start to load with the manager.ajaxRequest method, but none of them display until ALL of them have completed. I have tested this by putting system.threading.thread.sleep with different delays into each function that load the different grids.

    Another question I have is about the AjaxManager_AjaxRequest method. It appears that taking that out causes no change. I don't see what this actually does:

    void

     

    RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)  

     

     

     

     

    if (e.Argument == "RebindLatePanel")  

    {

    RadGrid1.Rebind();

    }

    }

     

    It appears to me that just making the request without any code  causes a postback, which in turn causes the grids to bind based on the page.ispostback in the needsdatasource of each grid.

    I am using a master/content scenario and am causing the ajax request like so:

     

    function

     

    pageLoad(sender, args)

     

     

     

     

    if (isInitialLoad)  

    {

    isInitialLoad =

    false;  

     

     

    setTimeout(

    function()  

     

     

     

     

    var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');

    manager.ajaxRequest(

    "InitialBind"); 

     

     

    }, 0); 

    }

    }

     

     

     

    Could that be why I am unable to get them to display individually as they are bound?

    I am attempting this in vb, but either a c# or vb example would be very helpful.

    I apologize for my rambling. Been at work for about 15 hours now trying to get this one figured out.

    Thanks in advance for your help!

  10. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 27 May 2010 Link to this post

    Hi Ned,

    A single AJAX request implies a single response. If you are binding all of the grids in a single request, they all need to finish binding before the response is returned and the content is updated.

    You can, however, queue AJAX requests that will have the grids bind one by one. The next AJAX request will be trigged when the previous one finishes.

    To implement this scenario, you can use the following approach:

    1. Take each RadGrid instance that will be late-bound, and send its UniqueID to the client. You can use ScriptManager.RegisterArrayDeclaration() to register a javascript array that will hold the unique IDs of all the RadGrid instances

    2. Use the pageLoad() javascript function (or any other method that will execute after the AJAX framework and all client components have loaded) to get the first item in the registered array and make an ajaxRequestWithTarget() from the AJAX manager. Remove the item from the array after.

    Step 2 above will be repeated until  there are items in the registered array containing the unique IDs. As pageLoad() will be called after each AJAX request, what you get is a sequence of deferred loading RadGrids, each waiting for the previous one to load.

    Sample page demonstrating this approach is attached.

    Regards,
    Veli
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  11. Peter
    Peter avatar
    10 posts
    Member since:
    Jan 2011

    Posted 14 Apr 2011 Link to this post

    The A in Ajax stands for Asynchronous. So really, almost by definition you should be able to have multiple requests running simultaneously.

    I would like to be able to load up 3 rad charts and 1 radgrid, simultaneously. Is this possible??

    I have seen 2 types of examples from this site. 1) showing a bunch of controls that were "ajaxified", with the entire page being rendered only when all controls have finished loading their data. 2) Showing deferred sequential loading of controls, where control 1 requests and renders, then control 2 requests and  renders.. etc.

    What I am wondering is very similar to the 2nd type of example above (this thread). But instead of waiting, sequentially, i want simultaneously.. but not like in example 1.

    anyone?
    Pete
  12. Peter
    Peter avatar
    10 posts
    Member since:
    Jan 2011

    Posted 14 Apr 2011 Link to this post

    While waiting for a response on my previous question. I tried to wire up the delay load. I had the above example working with 3 Radgrids.
    However I need RadCharts.. And this example doesnt seem to work using RadCharts... Can anyone shed light on this? or provide an example using RadCharts?  Thanks
  13. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 15 Apr 2011 Link to this post

    You cannot have multiple requests through the XMLHttpRequest object to the same URL. This is a browser-related issue, not AJAX-related. Browsers allow only a single ongoing XmlHttpRequest to a single URL. Some browsers will cancel a second request, others will abort the first started and initiate the second, but none will allow you to have 2 or more pending requests to the URL. You cannot load controls simultaneously (in the literal sense), because that would require making AJAX calls to different URLs. And this scenario is not supported by the MS AJAX framework, which allows you to use XmlHttpRequests requests to the current page only.

    Veli
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  14. Peter
    Peter avatar
    10 posts
    Member since:
    Jan 2011

    Posted 15 Apr 2011 Link to this post

    thanks for the quick response.. Any thoughts on my second question? deferred sequential loading with RadCharts?
  15. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 18 Apr 2011 Link to this post

    Hello Peter,

    To load RadChart after the page has rendered, you need to skip RadChart initialization on initial load. This means you can take 2 approaches:

    1. Use AJAX to dynamically load RadChart in the updated container after the page loads initially.
    2. Put RadChart in a UserControl and dynamically load the UserControl after the page loads.

    With RadGrid, you skip the databinding phase and render the control in its usual way on initial load. With RadChart, you need to skip the control initialziation at all. You should not render anything on initial load. Instead, the control is dynamically initialized and added to the controls collection on an AJAX request.

    Veli
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  16. Peter
    Peter avatar
    10 posts
    Member since:
    Jan 2011

    Posted 20 Apr 2011 Link to this post

    Thanks Veli.

    Do you have and example for option 1?


    Pete
  17. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 21 Apr 2011 Link to this post

    Sure, here is a sample page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Tickets_327691_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                DefaultLoadingPanelID="RadAjaxLoadingPanel1"
                OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="ChartPanel">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ChartPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ChartPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">
            </telerik:RadAjaxLoadingPanel>
     
            <asp:Panel ID="ChartPanel" runat="server" Width="370px" Height="300px">           
            </asp:Panel>
     
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                <script type="text/javascript">
                    function pageLoad()
                    {
                         
                    }
     
                    Sys.Application.add_load(function ()
                    {
                        var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
     
                        setTimeout(function ()
                        {
                            ajaxManager.ajaxRequest("LoadChart");
                        }, 1000);
     
                        //remove event handler to have the chart loaded only once, not on every AJAX request
                        Sys.Application.remove_load(arguments.callee);
                    });
                </script>
            </telerik:RadScriptBlock>
        </div>
        </form>
    </body>
    </html>

    And code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using Telerik.Charting;
     
    public partial class Tickets_327691_Default : System.Web.UI.Page
    {
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "LoadChart")
            {
                InitializeChart();
            }
        }
     
        private void InitializeChart()
        {
            RadChart RadChart1 = new RadChart();
            RadChart1.ID = "RadChart1";
            RadChart1.Skin = "LightBlue";
     
            ChartSeries series1 = new ChartSeries();
            series1.Name = "series 1";
            series1.Type = ChartSeriesType.SplineArea;
            series1.Appearance.Border.Width = 2f;
            series1.Appearance.Border.Color = System.Drawing.Color.Black;
            series1.Items.Add(new ChartSeriesItem(0, 3));
            series1.Items.Add(new ChartSeriesItem(1, 6));
            series1.Items.Add(new ChartSeriesItem(2, 4) { Empty = true });
            series1.Items.Add(new ChartSeriesItem(3, 3));
            series1.Items.Add(new ChartSeriesItem(4, 8));
            RadChart1.AddChartSeries(series1);
     
            RadChart1.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Normal;
            RadChart1.PlotArea.XAxis.AutoScale = false;
            RadChart1.PlotArea.XAxis.MaxValue = 4;
            RadChart1.PlotArea.XAxis.Step = 1;
     
            RadChart1.ChartTitle.TextBlock.Text = "Empty Values";
     
            ChartPanel.Controls.Add(RadChart1);
        }
    }


    Kind regards,
    Veli
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  18. VIJAY
    VIJAY avatar
    31 posts
    Member since:
    May 2011

    Posted 24 Apr 2013 Link to this post

    Hello,

    Our requirement is , we have multiple user controls on one page with RadGrid.in each user control.
    We want to load RadGrid with data for all usercontrol asynchronously (parallel and not sequential). Can you please provide some working example for the same.
  19. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Apr 2013 Link to this post

    Hi,

    As my colleague states earlier in this thread "You cannot load controls simultaneously (in the literal sense), because that would require making AJAX calls to different URLs. And this scenario is not supported by the MS AJAX framework, which allows you to use XmlHttpRequests requests to the current page only." Therefore an option is to add an asp Timer control in order to trigger the UserControls loading. When the timer elapses, you could load the user control you want similar to the approach below:
    http://demos.telerik.com/aspnet-ajax/ajax/examples/common/loadingusercontrols/defaultcs.aspx


    Regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017