This is a migrated thread and some comments may be shown as answers.

Programmatically generating telerik report using MVC Razor view engine

5 Answers 472 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bhimraj
Top achievements
Rank 1
Bhimraj asked on 25 Feb 2015, 05:25 AM
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" />
<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="~/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>
    $(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.

5 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 27 Feb 2015, 01:07 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ricardo
Top achievements
Rank 1
answered on 07 Mar 2017, 03:36 AM

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({}).

0
Stef
Telerik team
answered on 09 Mar 2017, 01:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sabarirajan
Top achievements
Rank 1
answered on 13 Apr 2017, 11:25 PM

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

0
Stef
Telerik team
answered on 18 Apr 2017, 12:49 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Bhimraj
Top achievements
Rank 1
Answers by
Stef
Telerik team
Ricardo
Top achievements
Rank 1
Sabarirajan
Top achievements
Rank 1
Share this question
or