Chart not rendered with AjaxLoadLoadingPanel on PageLoad

Thread is closed for posting
5 posts, 1 answers
  1. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 27 Jan 2013 Link to this post

    I want to use the RadChart component. To try it, I first used the Telerik demo for scrolling and zooming (http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/zoomingscrolling/defaultcs.aspx) and it works.

    But when I put this code in our application, the chart is not renderer properly after the first page load, no data is shown and the loading image still there. It happen if I show the loading panel on page load as described on Telerik on-line documentation (http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html).

    I tried to bind data again on ajax request without sucess as in this post (http://www.telerik.com/community/forums/aspnet-ajax/ajax/show-loading-panel-on-initial-page-load.aspx) except I remake the entire data source because the chart don`t have a Rebind() method.

    Anybody have an idea about how to use the RadChart component and still having a loading panel on page load?

    Thanks.

    Here is my source code

    ASP
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestChart.aspx.cs" Inherits="MyWebApplication.TestChart" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>

    <!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">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                // Show Ajax Loading Panel while loading the page
                function pageLoad(sender, eventArgs) {
                    if (!eventArgs.get_isPartialLoad()) {
                        $find("<%= radAjaxManager.ClientID %>").ajaxRequest("InitialPageLoad");
                }
            }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

            <telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel" OnAjaxRequest="radAjaxManager_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="radAjaxManager">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="radAjaxManager" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

            <!-- Ajax Loading Panel: Takes entire page and image center on it -->
            <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" IsSticky="True" Style="height: 100%; width: 100%;">
            </telerik:RadAjaxLoadingPanel>

            <div class="bigModule">
                <div class="bigModuleBottom">
                    <div class="title">
                        To test the Zooming and Scrolling capabilities on this demo:</div>
                    <ul>
                        <li>Zoom to a portion of the chart by dragging and selecting with the mouse a rectangle&nbsp;to
                            set a new scale for the chart. AJAX retrieves the visible "chunk" of the chart that
                            was selected. You can&nbsp;navigate the chart by scrolling and new image "chunks"
                            are requested on-the-fly.</li>
                            <li>You can also use stand-alone scrolling&nbsp;by explicitly&nbsp;setting EnableZoom="false".&nbsp;You
                                can still provide XScale and YScale factor values on the server-side.</li>
                    </ul>
                </div>
            </div>
            <div class="module">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadChart ID="RadChart1" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
                            <ClientSettings ScrollMode="Both" />
                            <Series>
                                <telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
                                </telerik:ChartSeries>
                            </Series>
                            <Legend Visible="false"></Legend>
                            <ChartTitle TextBlock-Text="Zooming / Scrolling (no initial scaling)">
                            </ChartTitle>
                        </telerik:RadChart>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <br />
                <br />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadChart ID="RadChart2" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
                            <ClientSettings EnableZoom="false" ScrollMode="XOnly" XScale="4" />
                            <Series>
                                <telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
                                    <Appearance FillStyle-MainColor="223, 87, 60">
                                    </Appearance>
                                </telerik:ChartSeries>
                            </Series>
                            <Legend Visible="false"></Legend>
                            <ChartTitle TextBlock-Text="Scrolling only (initial XScale applied)">
                            </ChartTitle>
                        </telerik:RadChart>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>

    C#
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    namespace MyWebApplication
    {
        public partial class TestChart : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));

                    Random rand = new Random(DateTime.Now.Millisecond);
                    for (int i = 0; i < 20; i++)
                    {
                        DataRow dr = dt.NewRow();
                        dr[0] = rand.Next(20);
                        dt.Rows.Add(dr);
                    }

                    RadChart1.DataSource = dt;
                    RadChart1.DataBind();

                    RadChart2.DataSource = dt;
                    RadChart2.DataBind();
                }
            }
            protected void radAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
            {
                // Try rebinding data...
                if (e.Argument == "InitialPageLoad")
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));

                    Random rand = new Random(DateTime.Now.Millisecond);
                    for (int i = 0; i < 20; i++)
                    {
                        DataRow dr = dt.NewRow();
                        dr[0] = rand.Next(20);
                        dt.Rows.Add(dr);
                    }

                    RadChart1.DataSource = dt;
                    RadChart1.DataBind();

                    RadChart2.DataSource = dt;
                    RadChart2.DataBind();
                }
            }
        }
    }

  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 31 Jan 2013 Link to this post

    Hi Marc,

    Most probably the reason for this problem is that, the chart http handler is not registered in the web.config file. The easiest way to do this is by using the Smart Tag (on #4 in the link)  menu in design mode and clicking the "Add RadChart HTTP Handler to Web.Config" option. After doing that you should have something like this:
    <configuration>
      <system.web>
        <!--Other declarations-->
        <httpHandlers>
          <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler"
               verb="*" validate="false" />
          <add path="Telerik.Web.UI.WebResource.axd"
               type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
        </httpHandlers>
      </system.web>
      <system.webServer>
        <!--Other declarations-->
        <handlers>
          <add name="ChartImage_axd" verb="*" preCondition="integratedMode"
               path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" />
          <add name="Telerik_Web_UI_WebResource_axd" verb="*"
               preCondition="integratedMode"
               path="Telerik.Web.UI.WebResource.axd"
               type="Telerik.Web.UI.WebResource" />
        </handlers>
      </system.webServer>
    </configuration>

    I am attaching a runnable project (with the code copied from your last post and the needed settings applied to the web.config file) for reference.

    I hope this helps.
     
    Greetings,
    Petar Kirov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 31 Jan 2013 Link to this post

    Thanks for your reply. I checked my web.config file and the content was already there. Also I tried the project you send to me and I have the same result (I tested it with .Net framework 4.0 and 4.5). Note I use a more recent version of component than you (I use 2012.3.1308.45).

    The problem is still the same, which is the initial render is not done in both charts if I show the loading panel on the first page load by javascript, like if the Ajax call to refresh the chart content was cancelled. After that if I zoom on first chart (zoomable chart) it works because the component will make ajax call for all chunks of the graph. But the second chart (scrollable chart), it will work for all chunks except the first one because the chart assume he already have this one.

    Just for you knowledge, I already tried to set the RequestQueueSize attribute of RadAjaxManager to something greater than 0 (like 5) without success.
  5. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 05 Feb 2013 Link to this post

    Hi Marc,

    It seems there is a collision between the ajax request and the chart callback when zoom/scroll is enabled. The solution here would be to enable charts' zoom/scroll when the initial ajax request is made. That is -- configure the charts' client settings in the AjaxRequest event handler. In addition, the code for the ajax request should be executed only on initial page load, so I removed it from the page and added it to RadAjaxManager.ResponseScripts collection. On the first ajax request this collection is cleared, so no more artificial ajax requests are made.

    I have attached an updated version of Petar's example.

    Kind regards,
    Ves
    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.
  6. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 05 Feb 2013 Link to this post

    Thanks Ves for your response, it works...you make my day.

    Just for your knownledge or anyone as a more complexe scenario, here is the modifications I have made to make it works in my case where my RadChart is in a Content Page with a Master Page which hold the RadAjaxManager.

    Because my Master Page don't know my RadChart component all the code cannot be placed in the Master Page. So in the Page_Load of my User Control I add the following lines (even if radChart is on a RadAjaxPanel, I must manually add the event on radAjaxManager because the event is not fired on the RadAjaxPanel on page load):

     

     

    // Add radChart to be updated when radAjaxManager make an Ajax call

    RadAjaxManager radAjaxManager = RadAjaxManager.GetCurrent(Page);

    radAjaxManager.AjaxRequest += radAjaxPanel_AjaxRequest;

    for (int i = 0; i < radAjaxManager.AjaxSettings.Count; i++)

    {

        if (radAjaxManager.AjaxSettings[i].AjaxControlID == radAjaxManager.ID)

            {

                    radAjaxManager.AjaxSettings[i].UpdatedControls.Add(new AjaxUpdatedControl(radChart.ID, ""));

            break;

            }

    }

    Also, I had the following code:

     

    protected void radAjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)

    {

        if (e.Argument == "InitialPageLoad")

            {
                    radChart.ClientSettings.ScrollMode = ChartClientScrollMode.Both

            }

    }

    Thanks again for your support

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017