Programmatically generating telerik report using MVC Razor view engine

[Bhimraj]

Hi Guys,
 
I am new to telerik controls. I went through various post regarding telerik reporting but I am unable to find anything which suits my need. I am using MVC 5
with razor engine.I have UI from where user can select various options and on the basis of the options selected I fetch the data from the database using stored procedure. Now the problem I am facing is in binding the data with the report. Can anyone help me with the same.I created a small POC where I binded the report with the sqldatasource and also added 1 parameter which user can input from UI. It works perfectly but it is done using the wizard. I want to do the same thing programatically.
I have tried 2 approach for this. In first approach i tried to set the datasource from code behind but i am unable to get the reportviewer on code behind neither I am able to bind it using Viewbag.

var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
instanceReportSource.ReportDocument = new TrackingReport();
instanceReportSource.Parameters.Add("ReceiptId", ReceiptId);
this.ReportViewer1.ReportSource = instanceReportSource;

In second approach i did a ajax call and tried to bind the result with the report in javascript but nothing worked. My page is as follows:

@using Telerik.Reporting.Examples.CSharp
@{
    ViewBag.Title = "Tracking Report";
    Layout = null;
}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="~/Content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->

<script src="~/Scripts/kendo/kendo.web.min.js"></script>

<style>
    #reportViewer1 {

        left: 5px;
        right: 5px;
        top: 40px;
        bottom: 5px;
        overflow: hidden;
        font-family: Verdana, Arial;
    }
</style>

<link href="~/ReportViewer/styles/telerikReportViewer-8.2.14.1204.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="~/ReportViewer/js/telerikReportViewer-8.2.14.1204.js"></script>

<div class="panel panel-default">
    <div class="panel-body">
        <div class="form-horizontal">
            <div id="invoiceIdSelector">
                <label for="invoiceId">Invoices</label>
                <select id="invoiceId" title="Select the Invoice ID">
                    <option value="IN-0015">Invoice 1</option>
                    <option value="IN-1015">Invoice 2</option>
                    <option value="IN-2015">Invoice 3</option>
                </select>
            </div>

            <div id="ReceiptNumber">
                <label for="receiptNumber">ReceiptNumber</label>
                <select id="receiptNumber" title="Select the receipt number">
                    <option value="RC-9022015" selected="selected">Receipt Number 1</option>
                    <option value="RC-9022016">Receipt Number 2</option>
                    <option value="RC-9022017">Receipt Number 3</option>
                </select>
            </div>
            <div class="row padding">
                <div class="row">
                    <div class="col-md-12">
                    </div>
                </div>
                <div class="row padding">
                    <div class="col-md-12 text-center ">
                        <button class="primary-button" type="button" onclick="GenerateReport()">Generate Report</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="reportViewer1">
    loading...
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#reportViewer1").telerik_ReportViewer({
            serviceUrl: "../api/reports/",
            templateUrl: '../ReportViewer/templates/telerikReportViewerTemplate-8.2.14.1204.html',
            reportSource: {
                report: "Telerik.Reporting.Examples.CSharp.TrackingReport, FITS.Web.Reports",
                parameters: { ReceiptNumber: $('#receiptNumber option:selected').val() }
            },
            viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
            scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
            scale: 1.0,
            ready: function () {
                this.refreshReport();
            }
        });
    });

    function GenerateReport()
    {
        var receiptNumber = $("#receiptNumber option:selected").val();
        var viewer = $("#reportViewer1").data("telerik_ReportViewer");
        $.ajax({
            type: "POST",
            url: '/Common/GetReport',
            content: "application/json; charset=utf-8",
            dataType: "json",
            data: { ReceiptNumber: receiptNumber },
            traditional: true,
            success: function (data) {
                if (data.Result == "SUCCESS") {
                    viewer.reportSource(data);
                    viewer.refreshReport();
                }
            },
            error: function (xhr, textStatus, errorThrown) {
            }
        });

    }
</script>
<script src="~/ReportViewer/js/telerikReportViewer-8.2.14.1204.js"></script>
<script src="~/Scripts/kendo/kendo.web.min.js"></script>

I am getting an error on page which is as follows:
Error creating report instance (Report = Telerik.Reporting.Examples.CSharp.TrackingReport, FITS.Web.Reports):
Report 'Telerik.Reporting.Examples.CSharp.TrackingReport, FITS.Web.Reports' cannot be resolved.

Can anyone help me with the same.

[Stef]

Hello Nilesh,

I believe we are discussing the same question in your support ticket #910140. If you need further help, let us continue the discussion in the support ticket in order to keep a better track on the excganged information.
For anyone concerned below is quote from my response in the ticket:

"...........
The HTML5 Report Viewer is a Javascript widget suitable for any web application, including razor view pages. Data can be bound at run-time through a custom report resolver:

//custom report resolver
    public class MyReportResolver : IReportResolver
    {
        public Telerik.Reporting.ReportSource Resolve(string report)
        {

           Report reportInstance;
           if(report=="report1")
            {
                reportInstance = new Report1();
                reportInstance.DataSource = GetData();
            }

            return new Telerik.Reporting.InstanceReportSource { ReportDocument = reportInstance};
        }
    }

//usage of the custom report resolver
 public class ReportsController : ReportsControllerBase
    {
        protected override IReportResolver CreateReportResolver()
        {
            return new MyReportResolver();
        }
.......

The client(viewer) only sends requests with formatted string descriptions of the report or resources it is required to show:

//calling the report from an HTML5 Report Viewer
  $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({

                    //ReportSource - report description
                    reportSource: {
                     //the string description will be received by the resolver's Resolve method
                        report: "report1",

                        // Parameters name value dictionary
                        parameters: { "Parameter1":"new value"}
                    },
..............

The report resolving, processing and rendering occur on the server where the reporting REST service is running.
..........."


Regards,
Stef
Telerik

 

 

[Ricardo]

Hi,

 

I have a report that I need to set some parameters (startDate and endDate), then I have to call one of my methods and get the data back, this bata will be set to the reportviewer, how can I do that? As a cannot set datasource to telerik_ReportViewer({}).

[Stef]

Hi Ricardo,

Reports are processed and rendered on the server machine where the Reporting REST service is running.

Data must be saved on the server, where the reporting engine can access it via data source components e.g. How to: Connect to a SQL Database, or you can add custom code in data items' NeeDataSource events allowing you to read the values of report parameters updated through the viewer.

Additional details how to add report parameters and how data can be filtered in reports is available in Report Parameters and Filtering data.

Regards,
Stef
Telerik by Progress

[Sabarirajan]

Hi Stef,

In the recent version of Telerik the method "IReportResolver CreateReportResolver()" looks to be obsolete. How do we achieve the same with the latest version.

 

Thanks,

Sabari

[Stef]

Hi Sabari,

Please check my post here. The code snippet illustrates a custom resolver and the latest settings of the Reporting REST Service.

The latest implementation of the ReportsControllerBase can be found in the How To: Implement the ReportsController in an application help article.

Regards,
Stef
Telerik by Progress