+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Problem with RadHtmlChart when created a widget in Sitefinity.

Problem with RadHtmlChart when created a widget in Sitefinity.

7 posts, 0 answered
  1. Iliya
    Iliya avatar
    2 posts
    Registered:
    05 Nov 2014
    06 Nov 2014
    Link to this post

    I use Sitefinity V.6.3.5000.
    I'm trying to integrate а RadHtmlChart in one Sitefinity widget.
    I use the source code from http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/areachart/defaultcs.aspx
    When i insert the widget in the page. It brеaks the page in the backend. I can't start the widget desinger, can't move back in the dashboard and can't drop-down other widgets in the page. My js is broken.
    In Frondend i don't see my Chart when i am loged in sitefinity. And i see it when i'm not loged or when i copy the url in other browser.
    I'm sending my source code and screen shots of the errors.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OneGraphics.ascx.cs" Inherits="SitefinityWebApp.Sitefinity.UserControls.OneGraphics.OneGraphics" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" Width="800">
        <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500">
            <ChartTitle Text="Company performance"></ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:AreaSeries Name="Sales">
                        <Appearance>
                            <FillStyle BackgroundColor="Blue"></FillStyle>
                        </Appearance>
                        <LabelsAppearance Position="Above"></LabelsAppearance>
                        <LineAppearance Width="1"></LineAppearance>
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="6" BorderColor="Blue"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="400"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="720"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="1300"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="450"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="600"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="900"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:AreaSeries>
     
                    <telerik:AreaSeries Name="Expenses">
                        <Appearance>
                            <FillStyle BackgroundColor="Red"></FillStyle>
                        </Appearance>
                        <LabelsAppearance Position="Above"></LabelsAppearance>
                        <LineAppearance Width="1"></LineAppearance>
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="6" BorderColor="Red"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance Color="White"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="700"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="420"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="1100"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="650"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="550"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="700"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:AreaSeries>
                </Series>
                <XAxis MajorTickType="Outside" MinorTickType="Outside">
                    <TitleAppearance Text="Years"></TitleAppearance>
                    <Items>
                        <telerik:AxisItem LabelText="2004"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2005"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2006"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2007"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2008"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2009"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2010"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <YAxis>
                    <TitleAppearance Position="Center" Text="Finance"></TitleAppearance>
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </telerik:RadAjaxPanel>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using Telerik.Web.UI.HtmlChart;
     
    namespace SitefinityWebApp.Sitefinity.UserControls.OneGraphics
    {
        public partial class OneGraphics : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
            }
        }
    }

  2. Nadezhda Petrova
    Nadezhda Petrova avatar
    20 posts
    Registered:
    28 Oct 2016
    11 Nov 2014
    Link to this post
    Hello Iliya,

    Thank you for the provided information. I was able to reproduce the issue. Could you please tell us if you have enabled the inline editing in your application? Since, the inline editing widget is loaded when the user can edit the page content and the widget itself loads a lot of scripts with it - require js, jquery, kendo and others. I suspect that it can conflicts with your scripts if it is enabled. You can try to disable the inline editing as a workaround for the frontend issue. To disable this option globally go to Adminstration -> Settings -> Advanced -> Pages then scroll down as shown in screenshot at put False to Enable in-line editing field.

    About the backend issue: we will need more time to investigate what causing the issue. But we can suggest you the following workaround. I've attached your widget with changed code behind. 

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
     
        if (this.IsDesignMode() && !this.IsPreviewMode())
        {
            this.Controls.Clear();
            this.Controls.Add(new LiteralControl("The control is not available in edit mode. To see the graphics click Preview on the top of this page."));
        }
    }


    That way the RadHtmlChart will be removed from the backend page and will not be rendered -> will not break the page. But it will be visible on the fronend.

    Regards,
    Nadezhda Petrova
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Iliya
    Iliya avatar
    2 posts
    Registered:
    05 Nov 2014
    12 Nov 2014
    Link to this post

    Hello Nadezhda,
    About the backend. I used your code. But it does not work correct.
    It breaks the backend page and throws an exeption:

    Server Error in '/' Application.Object reference not set to an instance of an object.Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

    Source Error: 

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
    Stack Trace: 

    [NullReferenceException: Object reference not set to an instance of an object.]
    Telerik.Web.UI.RadAjaxControl.OnPagePreRenderComplete(Object sender, EventArgs e) +134
    System.EventHandler.Invoke(Object sender, EventArgs e) +0
    System.Web.UI.Page.OnPreRenderComplete(EventArgs e) +121
    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1155

    The method Clear() is not good decision. I solved the problem whit this code:

    protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
     
                if (this.IsDesignMode() && !this.IsPreviewMode())
                {
                    this.AreaChart.Visible = false;
            this.AreaChart1.Visible = false; //if you have second control
                    this.Controls.Add(new LiteralControl("The control is not available in edit mode. To see the graphics click Preview on the top of this page."));
                }
            }
    But in my real project i use the hover event of the chart and i have an inline script. 

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript" id="Script1">
            //<![CDATA[
            function AreaChart_SeriesHovered(sender, args) {
     
                var xAxisValue = args.get_category();
                var yAxisValue = args.get_value();
                var strDate = xAxisValue.toString();
     
                var dateParts = strDate.split(" ");
                var day = dateParts[2];
                var month = dateParts[1];
                var year = dateParts[3];
     
                $("#<%=lblDateValue.ClientID%>").text(year + " " + month + " " + day);
                $("#<%=lblWaterLevelValue.ClientID%>").text(yAxisValue);
        }
        //]]>
        </script>
    </telerik:RadScriptBlock>
    I disabled this script from the backend code and now all works correct.

    protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
     
                if (this.IsDesignMode() && !this.IsPreviewMode())
                {
            this.RadScriptBlock1.Visible = false;
                    this.AreaChart.Visible = false;
            this.AreaChart1.Visible = false; //if you have second control
                    this.Controls.Add(new LiteralControl("The control is not available in edit mode. To see the graphics click Preview on the top of this page."));
                }
            }
    Plase, tell my if you know better decision!

    About the frondend.
    My Enable in-line editing field was True. I changed it to False and now i see the graphics in the frondend.
    Which is the default value of this field? I don't remember to changed it before.

  4. Nadezhda Petrova
    Nadezhda Petrova avatar
    20 posts
    Registered:
    28 Oct 2016
    14 Nov 2014
    Link to this post
    Hello Iliya,

    We found out what was causing the issue. jQuery is loaded twice on the page (from Sitefinity and from the Rad Controls) with different versions and this causes some conflicts for the RadHtmlChart. What you have to do is to stop the scripts that comes from RadHtmlChart and add references to the scripts from Telerik.Web.UI in the code-behind. You can find more information about how to include external jQuery for the Rad Controls in the section 'Including external jQuery' in this documentation article.

    Please find attached the updated widget.

    Regards,
    Nadezhda Petrova
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Rico
    Rico avatar
    88 posts
    Registered:
    30 Aug 2012
    04 Dec 2014 in reply to Nadezhda Petrova
    Link to this post

    Hi Nadezhda ,

    I'm experiencing this same issue as well. You mentioned that the attached updated widget (rar file) is updated? I couldn't find reference to how you exclude the scripts brought in from the RadHtmlChart. Can you please provide further examples? Thanks!

  6. Rico
    Rico avatar
    88 posts
    Registered:
    30 Aug 2012
    04 Dec 2014 in reply to Rico
    Link to this post
    Never mind. It seems as though that if you're logged into the backend and then try to view the front end page, the conflict exists. However, if you log out of the backend, then the chart renders properly...
  7. Kaloyan
    Kaloyan avatar
    11 posts
    Registered:
    19 Sep 2016
    08 Dec 2014
    Link to this post
    Hello,

    It seems that there is a problem with the widget send by Nadezhda. Please find the working widget attached to this response. I have also taken a video demonstrating how this behaves on our side. Note that this is working only when "Enable in-line editing" is false. 

    Regards,
    Kaloyan
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
7 posts, 0 answered