Report Viewer not binding report in Telerik Reporting 2015

[faisal]

Hi,

I am developing some mvc5 application. I am stuck in telerik report viewer. kindly see my code and suggest where is the issue please.
ReportViewerView1.cshtml where as  the productcatalog is the report which i am binding to this report viewer using TypeReportSource

001.@using Telerik.Reporting
002.@using Telerik.ReportViewer.Mvc
003.@{
004.    ViewBag.Title = "Telerik MVC HTML5 Report Viewer";
005.}
006.
007.@section styles
008.{
009.    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
010.
011.    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
012.    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />
013.
014.
015.    <style>
016.        #reportViewer1 {
017.            position: absolute;
018.            left: 5px;
019.            right: 5px;
020.            top: 5px;
021.            bottom: 5px;
022.            overflow: hidden;
023.            font-family: Verdana, Arial;
024.        }
025.    </style>
026.
027.    <link href="@Url.Content("~/ReportViewer/styles/telerikReportViewer-9.1.15.731.css")" rel="stylesheet" />
028.}
029.
030.@(Html.TelerikReporting().ReportViewer()
031.        // Each report viewer must have an id - it will be used by the initialization script
032.        // to find the element and initialize the report viewer.
033.        .Id("reportViewer1")
034.        // The URL of the service which will serve reports.
035.        // The URL corresponds to the name of the controller class (ReportsController).
036.        // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
037.        .ServiceUrl(Url.Content("~/api/reports/"))
038.        // The URL for the report viewer template. The template can be edited -
039.        // new functionalities can be added and unneeded ones can be removed.
040.        // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
041.        .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-9.1.15.731.html"))
042.        // Strongly typed ReportSource - TypeReportSource or UriReportSource.
043.        .ReportSource(new TypeReportSource() { TypeName = "Telerik.Reporting.Examples.CSharp.ProductCatalog, DubaiFleet, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })
044.        // Specifies whether the viewer is in interactive or print preview mode.
045.        // PrintPreview - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
046.        // Interactive - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.
047.        .ViewMode(ViewMode.Interactive)
048.        // Sets the scale mode of the viewer.
049.        // Three modes exist currently:
050.        // FitPage - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
051.        // FitPageWidth - The report will be zoomed in or out so that the width of the screen and the width of the report match.
052.        // Specific - Uses the scale to zoom in and out the report.
053.        .ScaleMode(ScaleMode.Specific)
054.        // Zoom in and out the report using the scale
055.        // 1.0 is equal to 100%, i.e. the original size of the report
056.        .Scale(1.0)
057.        // Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).
058.        // The session is stored in the browser’s sessionStorage and is available for the duration of the page session.
059.        .PersistSession(false)
060.        // Sets the print mode of the viewer.
061.        .PrintMode(PrintMode.AutoSelect)
062.        // Defers the script initialization statement. Check the scripts section below -
063.        // each deferred script will be rendered at the place of TelerikReporting().DeferredScripts().
064.        .Deferred()
065.        .ClientEvents(
066.                events => events
067.                    .RenderingBegin("onRenderingBegin")
068.                    .RenderingEnd("onRenderingEnd")
069.                    .PrintBegin("onPrintBegin")
070.                    .PrintEnd("onPrintEnd")
071.                    .ExportBegin("onExportBegin")
072.                    .ExportEnd("onExportBegin")
073.                    .UpdateUi("onUpdateUi")
074.                    .PageReady("onPageReady")
075.                    .Error("onError")
076.                    )
077.        // Uncomment the code below to see the custom parameter editors in action
078.        //.ParameterEditors(
079.        //        editors => editors
080.        //            .SingleSelectEditor("createSingleSelectEditor")
081.        //            .CustomEditors(new CustomParameterEditor
082.        //            {
083.        //                MatchFunction = "customMatch",
084.        //                CreateEditorFunction = "createCustomEditor"
085.        //            })
086.        //)
087.)
088.
089.@section scripts
090.{
091.    <script src="@Url.Content("~/ReportViewer/js/telerikReportViewer-9.1.15.731.min.js")"></script>
092.
093.    <!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
094.    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
095.    <!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
096.    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
097.
098.
099.    <script>
100.        function onRenderingBegin() {
101.            console.log("rendering begin!");
102.        }
103.        function onRenderingEnd() {
104.            console.log("rendering end!");
105.        }
106.        function onPrintBegin() {
107.            console.log("print begin!");
108.        }
109.        function onPrintEnd() {
110.            console.log("print end!");
111.        }
112.        function onExportBegin() {
113.            console.log("export begin!");
114.        }
115.        function onExportEnd() {
116.            console.log("export end!");
117.        }
118.        function onUpdateUi() {
119.            console.log("update ui!");
120.        }
121.        function onError() {
122.            console.log("error!");
123.        }
124.        function onPageReady() {
125.            console.log("page ready!");
126.        }
127.
128.        function createSingleSelectEditor(placeholder, options) {
129.            var dropDownElement = $(placeholder).html('<div></div>');
130.            var parameter,
131.                  valueChangedCallback = options.parameterChanged,
132.                  dropDownList;
133.
134.            function onChange() {
135.                var val = dropDownList.value();
136.                valueChangedCallback(parameter, val);
137.            }
138.
139.            return {
140.                beginEdit: function (param) {
141.
142.                    parameter = param;
143.
144.                    $(dropDownElement).kendoDropDownList({
145.                        dataTextField: "name",
146.                        dataValueField: "value",
147.                        value: parameter.value,
148.                        dataSource: parameter.availableValues,
149.                        change: onChange
150.                    });
151.
152.                    dropDownList = $(dropDownElement).data("kendoDropDownList");
153.                }
154.            };
155.        }
156.
157.        function customMatch(parameter) {
158.            return Boolean(parameter.availableValues)
159.                && !parameter.multivalue
160.                && parameter.type === telerikReportViewer.ParameterTypes.BOOLEAN;
161.        }
162.
163.        function createCustomEditor(placeholder, options) {
164.            var dropDownElement = $(placeholder).html('<div></div>');
165.            var parameter,
166.                  valueChangedCallback = options.parameterChanged,
167.                  dropDownList;
168.
169.            function onChange() {
170.                var val = dropDownList.value();
171.                valueChangedCallback(parameter, val);
172.            }
173.
174.            return {
175.                beginEdit: function (param) {
176.
177.                    parameter = param;
178.
179.                    $(dropDownElement).kendoDropDownList({
180.                        dataTextField: "name",
181.                        dataValueField: "value",
182.                        value: parameter.value,
183.                        dataSource: parameter.availableValues,
184.                        change: onChange
185.                    });
186.
187.                    dropDownList = $(dropDownElement).data("kendoDropDownList");
188.                }
189.            };
190.        }
191.    </script>
192.
193.    @(
194.
195.        // All deferred initialization statements will be rendered here
196.        Html.TelerikReporting().DeferredScripts()
197.    )
198.}

 Controller for reportviewer

01.namespace DubaiFleet.Views.ReportsMain.Controllers
02.{
03.    using System.IO;
04.    using System.Web;
05.    using Telerik.Reporting.Cache.File;
06.    using Telerik.Reporting.Services;
07.    using Telerik.Reporting.Services.WebApi;
08.
09.    //The class name determines the service URL.
10.    //ReportsController class name defines /api/report/ service URL.
11.    public class ReportsController : ReportsControllerBase
12.    {
13.        static ReportServiceConfiguration configurationInstance;
14.
15.        static ReportsController()
16.        {
17.            //This is the folder that contains the XML (trdx) report definitions
18.            //In this case this is the app folder
19.            var reportsPath = HttpContext.Current.Server.MapPath("~/");
20.
21.            //Add resolver for trdx report definitions,
22.            //then add resolver for class report definitions as fallback resolver;
23.            //finally create the resolver and use it in the ReportServiceConfiguration instance.
24.            var resolver = new ReportFileResolver(reportsPath)
25.                .AddFallbackResolver(new ReportTypeResolver());
26.
27.            //Setup the ReportServiceConfiguration
28.            configurationInstance = new ReportServiceConfiguration
29.            {
30.                HostAppId = "Html5App",
31.                Storage = new FileStorage(),
32.                ReportResolver = resolver,
33.                // ReportSharingTimeout = 0,
34.                // ClientSessionTimeout = 15,
35.            };
36.        }
37.
38.        public ReportsController()
39.        {
40.            //Initialize the service configuration
41.            this.ReportServiceConfiguration = configurationInstance;
42.        }
43.    }
44.}

kindly suggest me accordingly. I am using reportviewerview1.cshtml as partialview in my own page.

Regards,

Faisal

[Nasko]

Hello Faisal,

It is not clear what is the error message and the exact issue with the report viewer. Please elaborate further by providing additional information, snippets, and screenshots, so we can advise accordingly.

Also double check if the used assembly-qualified name is correct:

.ReportSource(new TypeReportSource() { TypeName = "Telerik.Reporting.Examples.CSharp.ProductCatalog, DubaiFleet, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })

We recommend using the Type.AssemblyQualifiedName Property to set the TypeName.

Regards,
Nasko
Telerik

[faisal]

Hi Nasho,

 

Thanks for reply,

 I have also used with Type.AssemblyQualifiedName Property like

.ReportSource(new TypeReportSource() { TypeName = typeof(ReportCatalog).AssemblyQualifiedName })

 

I figure out an issue that its not going to my ReportsController. which its mentioned on reportviewer page like ~/api/reports.

Secondly its also showing some dependent assembly messages after adding reportviewer.cshtml. i also added binding in web.config as below

1.<dependentAssembly>
2.           <assemblyIdentity name="System.Net.Http" publicKeyToken="b77a5c561934e089" culture="neutral" />
3.           <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
4.         </dependentAssembly>
5.         <dependentAssembly>
6.           <assemblyIdentity name="System.Net.Http.WebRequest" publicKeyToken="b77a5c561934e089" culture="neutral" />
7.           <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
8.         </dependentAssembly>

 

Kindly suggest please.

 

REgards,

 

Faisal

[faisal]

Hi Nasko.

 One more thing. No error is coming. only blank div is showing after hitting the page, like

<div id='reportviewer1'></div>

 

Thanks

[Nasko]

Hello Faisal,

The blank page means that the required report viewer scripts, template, or CSS styles were not found. You can use Fiddler to see which requests fail and correct the URLs to those resources used in your application.
Further information on the topic can be found in the MVC Report Viewer Manual Setup help article and the ASP.NET Web Project Paths MSDN page.
In case you need further help, please open a support ticket where you can attach a sample project exhibiting the issue.

Regards,
Nasko
Telerik

[faisal]

Hi Nasko,

 

Thanks for your support.

 

You figure out exact problem. it was js file issue. Thanks alot

I am facing some other issue. i want to assign data from report viewer to report itself. like

i have created another constructor inside reportfile.cs where i am assigning like

 

 public ReportCatalog(DataTable dt)
        {
            InitializeComponent();
            this.table1.DataSource = dt;
           
        }

01.@{ 

02.    DataTable dt = new DataTable();

03.    dt.Columns.Add("a");

04.    dt.Columns.Add("b");

05. 

06.    DataRow dr = dt.NewRow();

07.    dr["a"] = "faisal";

08.    dr["b"] = "haroon";

09.    dt.Rows.Add(dr);

10. 

11.    dr = dt.NewRow();

12.    dr["a"] = "faisal1";

13.    dr["b"] = "haroon1";

14.    dt.Rows.Add(dr);

15. 

16. 

20.     

21.     

22.    TypeReportSource trs = new TypeReportSource() { TypeName = typeof(ReportCatalog).AssemblyQualifiedName };   

23.     

24.        ReportCatalog report = new ReportCatalog(dt);

25.     

26.     

27.    InstanceReportSource irs = new InstanceReportSource();

28.    irs.ReportDocument = report;

29.     

30.}

31. 

32.@(Html.TelerikReporting().ReportViewer()

33.        // Each report viewer must have an id - it will be used by the initialization script

34.        // to find the element and initialize the report viewer.

35.        .Id("reportViewer1")

36.        // The URL of the service which will serve reports.

37.        // The URL corresponds to the name of the controller class (ReportsController).

38.        // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.

39.        .ServiceUrl(Url.Content("~/api/reports/"))

40.        // The URL for the report viewer template. The template can be edited -

41.        // new functionalities can be added and unneeded ones can be removed.

42.        // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.

43.        .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-9.1.15.731.html"))

44.        // Strongly typed ReportSource - TypeReportSource or UriReportSource.

45.        .ReportSource(trs)

46.        // Specifies whether the viewer is in interactive or print preview mode.

47.        // PrintPreview - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.

48.        // Interactive - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.

49.        .ViewMode(ViewMode.Interactive)

50.        // Sets the scale mode of the viewer.

51.        // Three modes exist currently:

52.        // FitPage - The whole report will fit on the page (will zoom in or out), regardless of its width and height.

53.        // FitPageWidth - The report will be zoomed in or out so that the width of the screen and the width of the report match.

54.        // Specific - Uses the scale to zoom in and out the report.

55.        .ScaleMode(ScaleMode.Specific)

56.        // Zoom in and out the report using the scale

57.        // 1.0 is equal to 100%, i.e. the original size of the report

58.        .Scale(1.0)

59.        // Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).

60.        // The session is stored in the browser’s sessionStorage and is available for the duration of the page session.

61.        .PersistSession(false)

62.        // Sets the print mode of the viewer.

63.        .PrintMode(PrintMode.AutoSelect)

64.        // Defers the script initialization statement. Check the scripts section below -

65.        // each deferred script will be rendered at the place of TelerikReporting().DeferredScripts().

66.        .Deferred()

67.        .ClientEvents(

68.                events => events

69.                    .RenderingBegin("onRenderingBegin")

70.                    .RenderingEnd("onRenderingEnd")

71.                    .PrintBegin("onPrintBegin")

72.                    .PrintEnd("onPrintEnd")

73.                    .ExportBegin("onExportBegin")

74.                    .ExportEnd("onExportBegin")

75.                    .UpdateUi("onUpdateUi")

76.                    .PageReady("onPageReady")

77.                    .Error("onError")

78.                    )

79.        // Uncomment the code below to see the custom parameter editors in action

80.        //.ParameterEditors(

81.        //        editors => editors

82.        //            .SingleSelectEditor("createSingleSelectEditor")

83.        //            .CustomEditors(new CustomParameterEditor

84.        //            {

85.        //                MatchFunction = "customMatch",

86.        //                CreateEditorFunction = "createCustomEditor"

87.        //            })

88.        //)

89.)

but it only shows table header from report. not data. kindly suggest me please.

 

Regards,

 

 Faisal

[Nasko]

Hello Faisal,

The HTML5 Viewer and its wrappers are only client-side widgets. The viewer cannot send a whole report object in a request to the server. It sends only a string description which report to be retrieved on the server by the Reporting REST service.

By default the Reporting REST service can handle:

- Reports requested by path (TRDX/XML files) through its ReportFileResolver. Reports will be searched in the folder specified when creating the ReportFilerResolver;

- Reports requested by their assembly qualified name (<namespace>.<class_name>, <assembly_name>) through its ReportTypeResolver. The reporting engine will use the report type's default constructor to create an instance of the report on the server.

Additional details about the Reporting REST service's resolvers can be found here.

Using a DataTable or another business object as a data source for the report can be achieved using the ObjectDataSource Component.

Regards,
Nasko
Telerik