Load Chart as a UserControl Does not work

Thread is closed for posting
2 posts, 0 answers
  1. Vira
    Vira avatar
    1 posts
    Member since:
    Jan 2013

    Posted 23 Jan 2013 Link to this post

    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">
     
    <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.
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 08 Feb 2013 Link to this post

    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
    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
Back to Top