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 to
set a new scale for the chart. AJAX retrieves the visible "chunk" of the chart that
was selected. You can navigate the chart by scrolling and new image "chunks"
are requested on-the-fly.</li>
<li>You can also use stand-alone scrolling by explicitly setting EnableZoom="false". 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();
}
}
}
}