Integration between Chart (HTML5) and HTML5 Web Forms Report Viewer
Environment
| Product | RadHtmlChart for ASP.NET AJAX |
Description
This article demonstrates how to combine the Chart (HTML5) component from Telerik UI for ASP.NET AJAX and the HTML5 Web Forms Report Viewer in one page.
Solution
- Load all Kendo scripts on the page and disable the those embedded in the AJAX DLLs:
<head runat="server">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
...
</head>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
<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.jQueryExternal.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
</Scripts>
</telerik:RadScriptManager>
- Add the Chart(HTML5):
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="valueField"></telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="labelsField"></XAxis>
</PlotArea>
</telerik:RadHtmlChart>
- Add the Telerik Report Viewer:
<telerik:ReportViewer
ID="reportViewer1"
Width="1300px"
Height="900px"
EnableAccessibility="false"
runat="server">
<ReportSource IdentifierType="UriReportSource" Identifier="SampleReport.trdp"
</ReportSource>
<%-- If set to true shows the Send Mail Message toolbar button --%>
<SendEmail Enabled="false" />
</telerik:ReportViewer>
Sample
Check the full sample in our Git Hub repository.