Telerik Forums
Reporting Forum
4 answers
1.4K+ views

I looked for  a long time for this information. I watched YouTube videos, went to blogs, and contacted Telerik support. I decided when I figured this out I was going to post the code so that someone else would not have to struggle with figuring this out like I did. Support helped and pointed me in the right direction to put this together but no easy example to go by. Below is the code for the HTML5 Report Viewer that I use and seems to work exactly like I wanted. It is javascript that parses the URL string and then is fed to the parameters of your report. The only part of this that you should have to change is the the section that is called "reportSource:" the parameters section. In the example below change the first part "TransMonth: " to the name of the parameter you used in your report and change the name at the end to what your URL parameter is called " getParameterByName('TransMonth') " Mine were named the same for simplicity. See the entire code below. Also some of the js and css files have custom paths in the example below. Adjust yours accordingly. I'm far from an expert at this but I know it took me a while to get this working and I thought if I could save someone else this headache I would.

01.<!DOCTYPE html>
03.<head>
04.    <title>Form My Report</title>
05.    
06.    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
07.    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
08. 
09.    <script src="ReportViewer/js/jquery-1.9.1.min.js"></script>
10. 
11.    <link href="ReportViewer/CSS/kendo.common.min.css" rel="stylesheet" />
12.    <link href="ReportViewer/CSS/kendo.blueopal.min.custom.css" rel="stylesheet" />
13. 
14.    <!--kendo.web.min.js or kendo.all.min.js can be used as well instead of the following custom Kendo UI-->
15.    <script src="ReportViewer/js/telerikReportViewer.kendo-12.0.18.416.min.js"></script>
16. 
17.    <script src="ReportViewer/js/telerikReportViewer-12.0.18.416.min.js"></script>
18. 
19.  <style>
20.        #reportViewer1 {
21.            position: absolute;
22.            left: 5px;
23.            right: 5px;
24.            top: 5px;
25.            bottom: 5px;
26.            overflow: hidden;
27.            font-family: Verdana, Arial;
28.        }
29.    </style>
30.</head>
31.<body>
32. 
33.    <div id="reportViewer1">
34.        loading...
35.    </div>
36. 
37.    <script type="text/javascript">
38.        function getParameterByName(name, url) {
39.            if (!url) url = window.location.href;
40.            name = name.replace(/[\[\]]/g, "\\$&");
41.            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
42.                results = regex.exec(url);
43.            if (!results) return null;
44.            if (!results[2]) return '';
45.            return decodeURIComponent(results[2].replace(/\+/g, " "));
46.        }
47.        $(document).ready(function () {
48.            $("#reportViewer1")
49.                .telerik_ReportViewer({
50. 
51.                    // The URL of the service which will serve reports.
52.                    // The URL corresponds to the name of the controller class (ReportsController).
53.                    // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
54.                    serviceUrl: "api/reports",
55. 
56.                    // The URL for custom report viewer template. The template can be edited -
57.                    // new functionalities can be added and unneeded ones can be removed.
58.                    // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
59.                    templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate_custom.html',
60. 
61.                    //ReportSource - report description
62.                    reportSource: {
63.                        // The report can be set to a report file name (trdx report definition)
64.                        // or CLR type name (report class definition).
65.                        report: "ReportApplication.FormMyReport, ReportApplication, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", parameters: {
66.                            TransMonth: getParameterByName('TransMonth'),
67.                            TransYear: getParameterByName('TransYear'),
68.                            PrevMonth: getParameterByName('PrevMonth'),
69.                            ItemName: getParameterByName('ItemName')
70.                    },
71. 
72.                    // Specifies whether the viewer is in interactive or print preview mode.
73.                    // PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
74.                    // INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.
75.                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
76. 
77.                    // Sets the scale mode of the viewer.
78.                    // Three modes exist currently:
79.                    // FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
80.                    // FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
81.                    // SPECIFIC - Uses the scale to zoom in and out the report.
82.                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
83. 
84.                    // Zoom in and out the report using the scale
85.                    // 1.0 is equal to 100%, i.e. the original size of the report
86.                    scale: 1.0,
87.                    enableAccessibility: false,
88. 
89.                    ready: function () {
90.                        //this.refreshReport();
91.                    },
92.                    }
93.                });
94.        });
95.    </script>
96. 
97.</body>
98.</html>
John
Top achievements
Rank 1
 answered on 01 Aug 2018
17 answers
652 views

     I have created Reporting Projects which are RestService, and ReportLibrary. These two projects will be integrated with another project. The problem is Reporting Project can't get httpcontext that send from another project. I tried to figure out the problem and i found that it was success to receive the httpcontext in RestService(as image Success001, Success002) but ReportLibrary cannot(as image Failed001, Failed002). You can see example images that attach with this post.

 

Has anyone found this? or any suggestion?

Thank you

 

Todor
Telerik team
 answered on 01 Aug 2018
5 answers
1.5K+ views

I have a Visual Studio solution that contains two different projects. One is a class library that I used to create a simple report that lists users and some of their standard info. The DataSource for the report is a class with some hard coded data as a JSON string:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel;
 
namespace AdventureWorksReports {
 
   public class UsersObject {
 
      public string UserId { get; set; }
 
      public string LastName { get; set; }
 
      public string FirstName { get; set; }
 
      public DateTime? LastLogin { get; set; }
   }
 
   [DataObject]
   public class Users {
 
      [DataObjectMethod(DataObjectMethodType.Select)]
      public static IEnumerable<UsersObject> GetUsers() {
         var json = <LONG-JSON-STRING>;
         return JsonConvert.DeserializeObject<List<UsersObject>>(json);
      }
   }
}

Using the report designer I have a simple report (UsersList.cs [Design] in the AdventureWorksReports project) that uses the above GetUsers() method for populating the report. Nothing fancy, but it's displaying the data.

I'm having no success getting anything to display in a second project in the solution. This second project is a .NET MVC web application. I have a ReportController that inherits from ApiController to serve as the reporting server that does return the same JSON that works in the stand alone report above:

using AdventureWorksReports;
using System.Collections.Generic;
using System.Web.Http;
 
namespace WebApp.Controllers {
 
   public class ReportController : ApiController {
 
      [HttpPost]
      public IEnumerable<UsersObject> Post() {
         var users = Users.GetUsers();
 
         return users;
      }
   }
}

 

I feel like I have no idea how to set up the ReportViewer control in razor. I have the following, but it is obviously lacking:

@(Html.TelerikReporting().ReportViewer()
   .Id("reportViewer1")
   .ServiceUrl("~/api/report/")
   .TemplateUrl("~/ReportViewer/templates/telerikReportViewerTemplate.html")
   .ReportSource()
   .ViewMode(ViewMode.Interactive)
   .ScaleMode(ScaleMode.Specific)
   .Scale(1.0)
   .PersistSession(false)
   .EnableAccessibility(false)
   .Deferred()
)

 

Can anybody give me some clues as to what is missing at this point? It seems like none of the tutorials I've found address the situation as I'm trying to build it.

thanks

-Josh

Josh
Top achievements
Rank 1
 answered on 30 Jul 2018
2 answers
505 views

Hi,

I have upgraded to the Telerik Reporting R2 2018 SP1 (old version: prior to r3-2016).

Now I get an exception like:
System.Security.SecurityException: The assembly MyAssembly is not permitted to be used by an ObjectDataSource component. Please include it in an AssemblyReferences element in the Telerik.Reporting configuration section of your application configuration file.

(I am using ObjectDataSource).

I have added an entry as described in https://docs.telerik.com/reporting/objectdatasource#configuration

and in https://docs.telerik.com/reporting/standalone-report-designer-extending-configuration

to my app.config.

But the exception is still thrown.

Note: the standalone designer works fine after I have added a similar entry to its config file.

 

Thanks in advance

Wolfgang

Wolfgang
Top achievements
Rank 1
 answered on 30 Jul 2018
1 answer
121 views

Hello,

I'm trying to build a chart and prepared a classes:

        public class ReportIndicators
        {
            public Item item1 { get; set; }
            public Item item2 { get; set; }
        }

        public class Item
        {
            public int value1 { get; set; }
            public int value2 { get; set; }
            public string itemType { get; set; }
        }

In the report I return the data:

        return new ReportIndicators
        {
            item1 = new Item
            {
                value1 = 10,
                value2 = 15,
                itemType = "type1"
            },
            item2 = new Item
            {
                value1 = 20,
                value2 = 15,
                itemType = "type2"
            }
        };

The chart looks good (chart.jpg), but the groups of columns are not centered above each label, why is this? If I'll add more items, the columns will be narrower. How I can fix that? I tried to change Scale.SpacingSlotCount property, but it did not help me.

When I built the chart, I used the item 'Add Graph Series' in the context menu on the graph and set the values as on the screen 1.jpg, 2.jpg. Is it correct?

 

Simon
Top achievements
Rank 1
 answered on 27 Jul 2018
5 answers
765 views

Hello,

I would like to show negative currency values with the negative symbol instead of bracket in the telerik report. E.g. -$101.00 instead of ($203.00) or -€101.00 instead of (€101.00) - we use different currencies in the app. I set this.Culture.NumberFormat.CurrencyNegativePattern = 1; in the *.Designer.cs file. The application compiles correctly and the values show properly, but the report in the design mode has an error:
at System.ComponentModel.ReflectPropertyDescriptor.SetValue(Object component, Object value)
at System.ComponentModel.Design.Serialization.CodeDomSerializerBase.DeserializePropertyAssignStatement(IDesignerSerializationManager manager, CodeAssignStatement statement, CodePropertyReferenceExpression propertyReferenceEx, Boolean reportError)
at System.ComponentModel.Design.Serialization.CodeDomSerializerBase.DeserializeAssignStatement(IDesignerSerializationManager manager, CodeAssignStatement statement)
at System.ComponentModel.Design.Serialization.CodeDomSerializerBase.DeserializeStatement(IDesignerSerializationManager manager, CodeStatement statement)
Do you have the information how to fix the issue?

Simon
Top achievements
Rank 1
 answered on 26 Jul 2018
4 answers
162 views
Having several .NET 4.5 enterprise applications on deck for complete refactoring to .NET Core 2.1, I'd like to know if the Telerik reporting engine is going to make the shift to support netcoreapp2.1 implementations, rather than just supporting the full frameworks like net461.
Nasko
Telerik team
 answered on 26 Jul 2018
1 answer
88 views

Hello,

 

I'm using version Q2 2015 of Telerik Reporting and have the following need which I'm not sure how to do.

When we create a report we display it in the Reportviewer.

When we physically print it, it is printed on paper where the corporate identity is pre printed.

On the report I've included this with empty headers and footers to have room for this.

Some external clients also receive some reports in PDF or Excel.

When we save the report using the Save button the corporate identity is not displayed on the resulting document.

 

So, I like to have a difference in saving and printing whether the corporate identity is shown.

My thoughts now are to display the corporate identity on the report, and when printed hide the content of the headers and footers.

Is this possible, are there other options?

 

Thanks in advance,

 

Jeroen

Nasko
Telerik team
 answered on 26 Jul 2018
2 answers
113 views
Hello, I have some performance issues in Telerik Report and I'm testing the Telerik Report Server.

I noticed that to render a PDF using telerik report server is faster than rendering in html ...

I want to know if it is possible to make a POST for the telerik report server API, to render a report informing the connection to the database as a parameter?

I have another question, when I request for the telerik report server API to render a report in PDF format, will this report be rendered by the windows service "telerik.reportServer.ReportAgent"? And does the API use this same windows service to render the report?

I am expecting that I can request for API to render my report in a pdf or csv format using this windows service, as it appears to be faster than rendering in html.

Thanks for your attention.
Nasko
Telerik team
 answered on 26 Jul 2018
1 answer
479 views

Hello!

Please help me. I have two tables 'crosstab1'and' cross tab 2'.  In them I do numbering on the lines: Row Number ('crosstab1') and Row Number ('cross tab 2'). how can I combine these two numbers into one?

Nasko
Telerik team
 answered on 26 Jul 2018
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?