Delay Load on RadGrid

[David]

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

[Veli]

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.

[David]

That's just what I wanted to know.

Thanks Veli

[Jason Bourdette]

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

[Veli]

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.

[Jason Bourdette]

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

[Veli]

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.

[Josh]

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!

[Veli]

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.

[Peter]

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

[Peter]

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

[Veli]

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

[Peter]

thanks for the quick response.. Any thoughts on my second question? deferred sequential loading with RadCharts?

[Veli]

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

[Peter]

Thanks Veli.

Do you have and example for option 1?


Pete

[Veli]

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

<html xmlns="http://www.w3.org/1999/xhtml">
<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

[VIJAY]

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.

[Maria Ilieva]

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

[DogBizPro]

I am using the RadGrid for reporting. So my scenario is this. The clients choose a report on the previous page and on the RadGrid page I want to execute that query and display that in the grid. 

That works fine except stops the entire page from loading if the query returns a large amount of data. So I am using this example which is almost working. I load an 'empty report' with 1 row in the page init and then this code gets the actual data while the loading icon is showing. So far so good. The problem is how to I 'refresh' the grid to show that data it is getting? without trying to retrieve it all again.....

 

[Attila Antal]

Hi Stephanie,

One approach is to save the data in the memory and re-use it from there every time needed. 

For example:

public DataTable MemorySource
{
    get
    {
        if (Session["MemorySource"] == null)
        {
            Session["MemorySource"] = GetDataTable("SELECT TOP(10000) * FROM TestItems");
        }

        return Session["MemorySource"] as DataTable;
    }
}

private DataTable GetDataTable(string query)
{
    // Sql query to get the data then return it as datatable
}

See TreeList - Load on Demand demo using this approach. Moreover, there are some recommendations in the Grid Performance Optimizations documentations that could help.

Ultimately, you can modify the sample provided earlier by my colleague (http://www.telerik.com/forums/delay-load-on-radgrid#aP0wzUazm0yY1tipeW846A) to reflect the exact scenario and send it back to us using a formal support ticket together with some additional details about the request and we will investigate it further.

I look forward to hearing from you.

Regards,
Attila Antal
Progress Telerik