Skip to content

Latest commit

 

History

History
80 lines (69 loc) · 2.59 KB

combine-chart-and-report-viewer.md

File metadata and controls

80 lines (69 loc) · 2.59 KB
Raw
title description type page_title slug position tags ticketid res_type
Integration between Chart (HTML5) and HTML5 Web Forms Report Viewer
Combine RadHtmlChart for ASP.NET AJAX and HTML5 Web Forms Report Viewer in one web page
how-to
How to Integrate Chart (HTML5) and HTML5 Web Forms Report Viewer
combine-chart-and-report-viewer
1444203
kb

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]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-asp.net-web-forms-report-viewer/overview%}) in one page.

Solution

  1. 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>
  1. 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>
  1. 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.