Problem with RadHtmlChart when created a widget in Sitefinity.
I use Sitefinity V.6.3.5000.
I'm trying to integrate а RadHtmlChart in one Sitefinity widget.
I use the source code from demos.telerik.com/.../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) { } }}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.")); 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."));
<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>
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.")); 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
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!
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...
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