[Solved] Load Chart as a UserControl Does not work

[Vira]

I want to use RadChar as a userControl and load it to a web page. But when I load it to the page, Chart loads but without the Chart Lines (lines in the middle). I herewith attach the sample code I created to reproduce the issue. 

--Default.aspx--

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Panel runat="server" ID="panel1"></asp:Panel>
    <asp:Button ID="Button1" runat="server" Text="Button"
    onclick="Button1_Click1" />
</asp:Content>

--Default.aspx.cs--

public partial class WebForm1 : System.Web.UI.Page
    {
        private WebUserControl1 uc1;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                uc1 = (WebUserControl1)this.LoadControl("WebUserControl1.ascx");
                this.panel1.Controls.Add(uc1);
            }
        }
}

--WebUserControl1.ascx--

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <telerik:RadChart EnableViewState="False" ID="RadChart1" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
                <ClientSettings EnableZoom="false" ScrollMode="XOnly" XScale="4"></ClientSettings>
                <Series>
                    <telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
                        <Appearance FillStyle-MainColor="223, 87, 60">
                        </Appearance>
                    </telerik:ChartSeries>
                </Series>
                <Legend Visible="true"></Legend>
                <ChartTitle TextBlock-Text="Scrolling only (initial XScale applied)">
                </ChartTitle>
            </telerik:RadChart>
            </ContentTemplate>
    </asp:UpdatePanel>

--WebUserControl1.ascx.cs--

public partial class WebUserControl1 : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
                LoadChart();
        }

        private void LoadChart()
        {
            // Define chart and titleRadChart radChart = new RadChart();
            RadChart1.ChartTitle.TextBlock.Text = "My RadChart";
            RadChart1.ChartTitle.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Blue;
            // Define chart series
            ChartSeries chartSeries = new ChartSeries();
            chartSeries.Appearance.LabelAppearance.Visible = true;
            chartSeries.Name = "GDP";
            chartSeries.Type = ChartSeriesType.Line;
            chartSeries.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.BlueViolet;
            // Define the items in the series
            chartSeries.AddItem(1);
            chartSeries.AddItem(1.5);
            chartSeries.AddItem(2.0);
            chartSeries.AddItem(2.5);
            chartSeries.AddItem(3.5);
            // visually enhance the datapoints
            chartSeries.Appearance.PointMark.Dimensions.AutoSize = false;
            chartSeries.Appearance.PointMark.Dimensions.Width = 8;
            chartSeries.Appearance.PointMark.Dimensions.Height = 8;
            chartSeries.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
            chartSeries.Appearance.PointMark.Visible = true;
            // Define chart series
            ChartSeries chartSeries2 = new ChartSeries();
            chartSeries2.Appearance.LabelAppearance.Visible = false;
            chartSeries2.Name = "GNP";
            chartSeries2.Type = ChartSeriesType.Line;
            chartSeries2.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Green;
            // Define the items in the series
            chartSeries2.AddItem(2);
            chartSeries2.AddItem(3);
            chartSeries2.AddItem(3.5);
            chartSeries2.AddItem(4);
            chartSeries2.AddItem(4.5);
            // visually enhance the data points
            chartSeries2.Appearance.PointMark.Dimensions.AutoSize = false;
            chartSeries2.Appearance.PointMark.Dimensions.Width = 5;
            chartSeries2.Appearance.PointMark.Dimensions.Height = 5;
            chartSeries2.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
            chartSeries2.Appearance.PointMark.Visible = true;
            // set the plot area gradient background fill
            RadChart1.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            RadChart1.PlotArea.Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(65, 201, 254);
            RadChart1.PlotArea.Appearance.FillStyle.SecondColor = System.Drawing.Color.FromArgb(0, 107, 186);
            // Set text and line for X axis
            RadChart1.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Years";
            RadChart1.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red;
            RadChart1.PlotArea.XAxis.Appearance.Width = 3;
            RadChart1.PlotArea.XAxis.Appearance.Color = System.Drawing.Color.Red;
            // Set text and line for Y axis
            RadChart1.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";
            RadChart1.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red;
            RadChart1.PlotArea.YAxis.Appearance.Width = 3;
            RadChart1.PlotArea.YAxis.Appearance.Color = System.Drawing.Color.Red;
            // Add the series to the chart, chart to
            RadChart1.Series.Add(chartSeries);
            RadChart1.Series.Add(chartSeries2);
        }
    }

--Site.Master--

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication3.Site1" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ 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">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Appreciate your help

Thanks,
Viraj.

[Petar Kirov]

Hi Vira,

To fix the problem you need to add the user control on every post back - just change the Page_Load event handler in Default.aspx.cs like that:

protected void Page_Load(object sender, EventArgs e)
{
    uc1 = (WebUserControl1)this.LoadControl("WebUserControl1.ascx");
    this.panel1.Controls.Add(uc1);
}

This is generally how ASP.NET works - for more information you can check this link.
 
Regards,
Petar Kirov
the Telerik team