Hi
I hope you can help. We are implementing a .NET reporting dashboard whereby our page will consist of multiple RadHtmlChart controls. Each control sits in its own web part called from the parent page and housed in RadDocks.
For performance reasons we'd like the charts to render asynchronously. We have tried to achieve this using a web service in the manner shown below.
However, the charts do not render at all. Any other control we place in our web parts work fine (dropdown, radgrid etc.). Just not RadHtmlChart. Have you any ideas why this would be? Should we be using another method of doing this?
function DockInitialize(dock, args) {
logIt("INVOKE WidgetsWebService:" + dock.get_id());
var dockID = dock.get_id();
var CompanyID = $get(dockID).attributes["CompanyID"].value;
Revolution.WidgetsWebService.GetData(CompanyID, function (result) {
$get(dockID + "_C").innerHTML = result;
logIt("END INVOKE WidgetsWebService:" + dock.get_id());
});
}
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Services/WidgetsWebService.asmx" />
</Services>
</asp:ScriptManager>
------------------------------------------------------------------------------------------------------------------------------
<System.Web.Script.Services.ScriptService()>
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class WidgetsWebService
Inherits System.Web.Services.WebService
<WebMethod()>
Public Function GetData(ByVal elementID As String) As String
Thread.Sleep(2000)
If elementID = String.Empty Then
Throw New Exception("No Value argument is provided to the webservice!")
End If
Return ViewManager.RenderView("~/Dev/Consultants/Dashboard/Widgets/Other/TestControl.ascx")
End Function
End Class
------------------------------------------------------------------------------------------------------------------------------
Public Shared Function RenderView(ByVal path As String) As String
Thread.Sleep(200)
Dim pageHolder As Test = New Test()
Dim tempForm As HtmlForm = New HtmlForm()
tempForm.ID = "TempForm"
pageHolder.Controls.Add(tempForm)
Dim viewControl As UserControl = CType(pageHolder.LoadControl(path), UserControl)
viewControl.ID = Guid.NewGuid().ToString()
Dim scriptManager As New ScriptManager()
tempForm.Controls.Add(scriptManager)
tempForm.Controls.Add(viewControl)
Dim output As StringWriter = New StringWriter()
HttpContext.Current.Server.Execute(pageHolder, output, False)
Dim result As String = output.ToString()
Return result
End Function
------------------------------------------------------------------------------------------------------------------------------
and this is our TestControl.ascx web part
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestControl.ascx.vb" Inherits="Revolution.TestControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div id="content">
<telerik:RadHtmlChart runat="server" ID="ColumnChart">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Wooden Table">
<SeriesItems>
<telerik:CategorySeriesItem Y="25000"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1"></telerik:AxisItem>
</Items>
<TitleAppearance Position="Center" RotationAngle="0" Text="Quarters">
</TitleAppearance>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
<TitleAppearance Position="Center" RotationAngle="0" Text="Sales">
</TitleAppearance>
</YAxis>
</PlotArea>
</telerik:RadHtmlChart>
</div>
8 Answers, 1 is accepted
You can try the following and see if that would help in your scenario:
- A website can only have one ScriptManager control. Please ensure that you are not adding any extra ScriptManager to it. If using MasterPages, then the control must be placed there. If in case, you're trying this scenario on a SharePoint site, the site already has a ScriptManager and no need to add another one. Revise the RenderView function and remove the lines that are adding additional ScriptManagers.
- Once done, set the RegisterWithScriptManager property of the Chart within the UserControl to false. "If RegisterWithScriptManager is set to false the control can be rendered on the page using Web Services or normal callback requests/page methods."
I hope this will prove useful.
Kind regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila
Thanks for your response. We have implemented your suggested changes but are still seeing the same behaviour. Asynchronous loading seems to work for any Telerik control apart from RadHtmlChart. Do you have any other suggestions because we are at a loss really?
Thank you
Nick
You can load multiple charts into a WebForms page, one after the other, even from WebUserControls and each of the control calls its own method to bind to data. To demonstrate that I have attached a sample for you. Asynchronous loading on the other hand, is not supported by the Telerik Web UI for ASP.NET AJAX components.
Take a look at the sample I have attached to get a better idea of this scenario. I hope this will prove helpful.
Kind Regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila
Thanks for your reply. I don't see your attachment however.
Nick
It was indeed missing. Could you check my previous post again? I have re-attached the file and now it seems to be visible.
Kind Regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila, we have followed your implementation suggestion and are getting thw following error.
XmlHttpPanel loading error:
Exception=Not Found
Here is our code. I hope you are able to help.
--------------------------------------------
1 - aspx page
--------------------------------------------
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Revolution.WebForm1" %>
<%@ Register Src="~/Dev/Consultants/Dashboard/Widgets/Other/Chart1.ascx" TagPrefix="uc1" TagName="Chart1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<uc1:Chart1 runat="server" ID="Chart1" />
</form>
</body>
</html>
--------------------------------------------
2 - code behind
--------------------------------------------
[‎14/‎05/‎2019 11:29] Chaithanya Choodalingaiah:
No Title
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Chart1.ascx.vb" Inherits="Revolution.Chart1" %>
<div id="content">
<script type="text/javascript" async="async">
function f() {
$find("<%=XmlHttpPanelWCF1.ClientID %>").set_value();
Sys.Application.remove_load(f);
}
Sys.Application.add_load(f);
function setDataFromService1(sender, args) {
//Get the returned data
var newData = args.get_content();
var arr = Array.parse(newData.d);
var chart = $find('<%= RadHtmlChart1.ClientID %>');
//Set the new datasource to the RadHtmlChart
chart.set_dataSource(arr);
//Repaint the RadHtmlChart
chart.repaint();
//Avoid raising the OnClientResponseEnded client-side event
//avoid setting the received data as content for the RadXmlHttpPanel
args.set_cancel(true);
}
</script>
<telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF1" WcfRequestMethod="GET"
OnClientResponseEnding="setDataFromService1" WcfServicePath="WidgetsWCFService.svc"
WcfServiceMethod="getJsonData" RegisterWithScriptManager="false">
</telerik:RadXmlHttpPanel>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
<ChartTitle Text="Countries Exporting Crude Oil the United States (in Thousands of Barrels)">
</ChartTitle>
<PlotArea>
<Series>
<telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded"
NameField="Country">
<LabelsAppearance DataFormatString="{0:N0} bbl"></LabelsAppearance>
<TooltipsAppearance Color="White" />
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</div>
--------------------------------------------
3 - wcf service implementation
--------------------------------------------
[‎14/‎05/‎2019 11:30] Chaithanya Choodalingaiah:
No Title
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web
Imports System.Web.Script.Serialization
Imports Revolution
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class WidgetsWCFService
Implements IWidgetsWCFService
Private Function getJsonData() As String Implements IWidgetsWCFService.getJsonData
Dim dataSourceJson As List(Of HtmlChartFields) = New List(Of HtmlChartFields)()
dataSourceJson.Add(New HtmlChartFields With {
.Color = "Black",
.Barrels = 36808,
.IsExploded = True,
.Country = "Nigeria"
})
dataSourceJson.Add(New HtmlChartFields With {
.Color = "Gray",
.Barrels = 16731,
.IsExploded = False,
.Country = "Iraq"
})
dataSourceJson.Add(New HtmlChartFields With {
.Color = "DarkGray",
.Barrels = 19659,
.IsExploded = False,
.Country = "Algeria"
})
dataSourceJson.Add(New HtmlChartFields With {
.Color = "LightGray",
.Barrels = 17986,
.IsExploded = False,
.Country = "Angola"
})
dataSourceJson.Add(New HtmlChartFields With {
.Color = "DarkRed",
.Barrels = 12130,
.IsExploded = False,
.Country = "Russia"
})
Dim oSerializer As JavaScriptSerializer = New JavaScriptSerializer()
Dim sJSON As String = oSerializer.Serialize(dataSourceJson)
Return sJSON
End Function
<DataContract>
Public Class HtmlChartFields
<DataMember>
Public Property Color As String
<DataMember>
Public Property Barrels As Integer
<DataMember>
Public Property IsExploded As Boolean
<DataMember>
Public Property Country As String
End Class
End Class
--------------------------------------------
4 - web.config settings for wcf service
--------------------------------------------
[‎14/‎05/‎2019 11:31] Chaithanya Choodalingaiah:
No Title
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="WidgetsWCFBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
<serviceBehaviors>
<behavior name="">
<serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
<behavior name="WidgetsWCFBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<services>
<service behaviorConfiguration="WidgetsWCFBehavior" name="WidgetsWCFService">
<endpoint address="" binding="webHttpBinding" contract="IWidgetsWCFService"
behaviorConfiguration="WidgetsWCFBehavior"/>
</service>
</services>
</system.serviceModel>
Attached you can find a Visual Studio project you can download and run it once the Telerik.Web.UI and Telerik.Web.UI.Skins assemblies are added to it. This project shows how you can load multiple charts as User controls. This time the project uses RadClientDataSource instead of RadXmlHttpPanel.
I hope this will help you get a better understanding on this scenario.
Kind regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila. Just a note to say thanks for the code. It wasn't straightforward to adapt to our own needs but we have it working perfectly. Your help has been very much appreciated.