New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Grid Report

This demo depends on external assemblies and it can be tested online here.

To run the demo locally follow the steps below:

  • Open the code files (aspx, ascx) in the Reporting/GridReport demo folder and uncomment their content.

  • Add the latest Telerik.ReportViewer.Html5.WebForms.dll in the bin folder of the project.
    The Telerik.ReportViewer.Html5.WebForms.dll is distributed with the Telerik Reporting product.
    If Telerik Reporting is not included in your license you can download a free trial or consider upgrading to Telerik DevCraft Complete.

  • Add Newtonsoft.Json.dll version 9.0.0 or later in the Reporting/GridReport/NewtonsoftJsonAssembly folder
    An appropriate version is distributed with the Telerik Reporting product.

  • Set the version of the additional Newtonsoft.Json.dll in the dependentAssembly element in the web.config, e.g. version 12:
    <configuration>
        <runtime>
            <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
                <dependentAssembly>
                    <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
                    <bindingRedirect oldVersion="9.0.0.0-13.0.0.0" newVersion="13.0.0.0"/>
                </dependentAssembly>
            </assemblyBinding>

Description

The example on this page demonstrates the integration between Telerik UI for ASP.NET AJAX suite and Telerik Reporting. The purpose of the demo is to show how the data from the ASP.NET AJAX Grid is passed to a Telerik Report and displayed in a HTML5 ASP.NET WebForms Report Viewer. The demo covers the following main points:

  • The components from both suites are defined in separate WebUserControl(s) and loaded in a RadTabStrip component. The first tab shows the RadGrid, loaded and populated with sample data. The second one opens a report viewer displaying the data obtained from the Grid.
  • The RadGrid is configured with a three-level hierarchy and with enabled sorting, filtering, and paging.
  • During the ReportViewer initialization, the data is gathered from the current state of the RadGrid and passed to a report definition in JSON format. The generated report provides interactivity features like sorting and collapsing, similarly to the Grid behavior.

More about Telerik RadGrid for ASP.NET AJAX and Telerik Reporting

Related Resources

  • DefaultCS.aspx
  • GridUC_CS.ascx
    • GridUC_CS.ascx
    • ReportViewerUC_CS.ascx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Reporting_GridReport_DefaultCS" %>

<%--When running demos locally, comment out or remove the Content element below --%>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <!-- #region Message -->
    <h2>This demo depends on external assemblies and it can be tested online <a href="https://demos.telerik.com/aspnet-ajax/Reporting/GridReport/DefaultCS.aspx">here</a>.
    </h2>
    <p>To run the demo locally follow the steps below:</p>
    <ul>
        <li><span>Open the code files (aspx, ascx) in the <strong>Reporting/GridReport</strong> demo folder and uncomment their content.</span><br /><br />
        </li>
        <li><span>Add the latest <strong>Telerik.ReportViewer.Html5.WebForms.dll</strong> in the <strong>bin</strong> folder of the project.</span><br />
            <em>The <strong>Telerik.ReportViewer.Html5.WebForms.dll</strong> is distributed with the
            <strong><a href="https://www.telerik.com/products/reporting.aspx">Telerik Reporting</a></strong> product.<br />
            If <strong>Telerik Reporting</strong> is not included in your license you can <a href="https://www.telerik.com/try">download a free trial</a> or consider upgrading to <strong><a href="https://www.telerik.com/devcraft">Telerik DevCraft Complete.</a></strong></em> <br /><br /></li>

        <li><span>Add <strong>Newtonsoft.Json.dll</strong> version 9.0.0 or later in the <strong>Reporting/GridReport/NewtonsoftJsonAssembly</strong> folder</span><br />
            <em>An appropriate version is distributed with the <a href="https://www.telerik.com/products/reporting.aspx">Telerik Reporting</a> product.</em> <br /><br />
        </li>
        <li>
            <span>Set the version of the additional <strong>Newtonsoft.Json.dll</strong> in the dependentAssembly element in the <strong>web.config</strong>, e.g. version <strong>12</strong>:</span><br />
                &lt;configuration&gt;<br />
                &nbsp; &nbsp; &lt;runtime&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &lt;assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dependentAssembly&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" /&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;bindingRedirect oldVersion="9.0.0.0-<strong>13.0.0.0</strong>" newVersion="<strong>13.0.0.0</strong>"/&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/dependentAssembly&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &lt;/assemblyBinding&gt;
        </li>
    </ul>
    <!-- #endregion -->

<%--
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Reporting/GridReport/GridUC_CS.ascx" TagPrefix="uc1" TagName="GridUC_CS" %>
<%@ Register Src="~/Reporting/GridReport/ReportViewerUC_CS.ascx" TagPrefix="uc1" TagName="ReportViewerUC_CS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style>
        .icon.k-icon.k-i-download:before {
            position: unset;
        }
    </style>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceholder1" runat="Server">
    <div class="demo-containers">
        <div class="demo-container no-bg">
            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0"
                OnTabClick="RadTabStrip1_TabClick" AutoPostBack="true">
                <Tabs>
                    <telerik:RadTab Text="Grid" Value="0"></telerik:RadTab>
                    <telerik:RadTab Text="Generated Report" Value="1"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                        <uc1:GridUC_CS runat="server" ID="GridUC_CS" />
                    </telerik:RadAjaxPanel>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <uc1:ReportViewerUC_CS runat="server" ID="ReportViewerUC_CS" Visible="false" />
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
    </div>
--%>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance