Render Drillthrough report in ASP.NET Core ReportViewer application: In ASP.NET Core platform when loading the local RDL report then we need to pass the stream for ReportModel. But if that report have drillthrough report then we need to pass the Reportserver with dummy URL, username and password to get the stream for reports as shown in below code example. public partial class HomeController : Controller, IReportController { private IMemoryCache _cache; private IHostingEnvironment _hostingEnvironment; public HomeController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment) { _cache = memoryCache; _hostingEnvironment = hostingEnvironment; } [HttpPost] public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) { return ReportHelper.ProcessReport(jsonResult, this, this._cache); } [ActionName("GetResource")] [AcceptVerbs("GET")] public object GetResource(ReportResource resource) { return ReportHelper.GetResource(resource, this, _cache); } [HttpPost] public object PostFormReportAction() { return ReportHelper.ProcessReport(null, this, this._cache); } public void OnInitReportOptions(ReportViewerOptions reportOption) { reportOption.ReportModel.ReportServerUrl = "http://<No server>"; reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("<no user>", "<no password>"); Reportserver reportserver = new Reportserver(_hostingEnvironment); reportOption.ReportModel.ReportingServer = reportserver; } public void OnReportLoaded(ReportViewerOptions reportOption) { } } public class Reportserver : ReportingServer { private IHostingEnvironment _hostingEnvironment; public Reportserver(IHostingEnvironment hostingEnvironment) { _hostingEnvironment = hostingEnvironment; } public override Stream GetReport() { string basePath = _hostingEnvironment.WebRootPath + "/ReportData/"; FileStream inputStream = new FileStream(basePath+this.ReportPath+".rdl", FileMode.Open, FileAccess.Read); return inputStream; } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportSample_Core1362599618.zip
Syncfusion ASP.NET MVC ReportViewer allows you to render reports, which are embedded with one another using the subreport report item. The following steps help you to load the RDLC report with subreport item in a Report Viewer: 1. Create a simple ReportViewer application with the help of getting started documentation. 2. Right-click the project and go to the Add New Item dialog. In the dialog, select Report Wizard and name it as MainReport.rdlc for the report, and then click Add. 3. Repeat the step_2 to add the subreport and name it SubReport.rdlc. 4. Right-click the subreport, and then click Subreport Properties. 5.As per RDL standards, you can set the SubReport Path and properties like Microsoft ReportViewer as follows. In the Subreport Properties dialog box, type a name in the Name text box. The name must be unique within the report. 6. You can pass the data source values to the OnReportLoaded method of subreport as shown in the following example. public void OnReportLoaded(ReportViewerOptions reportOption) { if (reportOption.SubReportModel != null) { reportOption.SubReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData() }); } else { reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopSalesPerson", Value = SalesPersons.GetTopSalesPerson() }); } } List of supported properties of subreport The ReportViewer has the following subreport properties to set the DataSources, Parameters, and more through code behind. DataSources Gets/sets the data source of the subreport. DataSourceName Gets the data source names of the subreport. Parameters Gets/sets the parameters to the subreport. ReportPath Gets/sets the report path of the subreport. Stream Sets the report stream to the subreport. Run the application Run the sample application. You can see the RDLC report loaded in the ReportViewer as shown in the following screenshot. Download the sample application with subreport from here.ConclusionI hope you enjoyed learning how to load subreport in ASP.NET MVC ReportViewer.You can refer to the ASP.NET MVC ReportViewer feature tour page to learn about its other groundbreaking feature representations and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC ReportViewer example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Overview The ASP.NET Core ReportViewer is a visualization control to view the Microsoft RDL/RDLC format-based report on a web page, and it is powered by HTML5/JavaScript. This section explains how to add the ReportViewer component to the ASP.NET Core MVC application along with simple example of the territory sales report in MAC. Note: The ReportViewer control depends on server-side processing for report rendering. So, you should build the WebAPI service that is compatible for ReportViewer. This getting started section explains how to create the ReportViewer compatible Web API service for your application. Environment setup Refer to the installation page to learn more about the basic steps to configure the Syncfusion components to use with ASP.NET Core application in MAC. Configuring Syncfusion ReportViewer Components Step 1: Open Visual Studio Code and create a new project application using the New Project option. Step 2: Click the App option in .NET Core and select ASP.NET Core Web App and click Next. Step 3: Select the target framework for your project and click Next. Step 4: Enter the project name and Click Create. References You should add the following packages for the ReportViewer: Package Purpose Syncfusion.EJ.ASPNET.Core Builds the ReportViewer control with the tag helper. Syncfusion.EJ.ReportViewer.ASPNET.Core Builds the server-side implementations. Note: NuGet package reference will be mostly preferred with ASP.NET Core development to setup the environment without installation. If you missed to explore, then refer to the NuGet-package-manager-settings to configure the Syncfusion NuGet source.. Styles and scripts Check whether all the necessary dependency scripts and CSS files in your _Layout.cshtml page are similar as mentioned here. <!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>AspNetCore - ReportViewer</title> <link href="https://cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <script src="https://cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js" type="text/javascript"></script> <style> body, html, #reportviewer { overflow: hidden !important; height: 100%; width: 100%; } </style></head><body style="height:100%;width:100%;padding:0;"> <div class="container body-content" style="height:100%;width:100%;"> @RenderBody() </div> @RenderSection("scripts", required: false) <ej-script-manager></ej-script-manager></body></html> Note: ej-script-manager should be defined at the bottom of the Layout.cshtml page. Tag helper You should define the following namespace within the _viewImports.cshtml page to initialize the ReportViewer component with the tag helper support. @using Syncfusion.JavaScript@addTagHelper "*, Syncfusion.EJ" Add control with page You can use the <ej-report-viewer> tag to add the ReportViewer control. For example, the Index.cshtml page can be replaced with the following code by removing the existing codes to add the ReportViewer. @{ ViewData["Title"] = "ReportViewer ASP.NET CORE Support";}<ej-report-viewer id="container" report-service-url="Home" processing-mode="Remote"></ej-report-viewer> Note: The Web API service should be mapped with the report viewer report-service-url as shown in the previous example code. Build WebAPI service Step 1: Create a new WebAPI class and click the Add button, and then select the new file option. Step 2: Enter the HomeController name and click New. You should inherit the IReportController interface to build the ReportViewer compatible Web API, and the ReportHelper should be used with IReportController interface implemented methods. The ReportHelper will perform the server-side related process and will return the required data for the ReportViewer to process the rendering. Here, the sample code is provided with an MVC application to build the Web API service along with the existing controller. using System; using System.Collections.Generic;using System.IO;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Mvc;using Microsoft.Extensions.Caching.Memory;using Syncfusion.EJ.ReportViewer;namespace CoreReportViewer{ public class HomeController : Controller, IReportController { private IMemoryCache _cache; private IHostingEnvironment _hostingEnvironment; public HomeController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment) { _cache = memoryCache; _hostingEnvironment = hostingEnvironment; } [HttpPost] public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) { return ReportHelper.ProcessReport(jsonResult, this, this._cache); } [ActionName("GetResource")] [AcceptVerbs("GET")] public object GetResource(ReportResource resource) { return ReportHelper.GetResource(resource, this, _cache); } [HttpPost] public object PostFormReportAction() { return ReportHelper.ProcessReport(null, this, this._cache); } public void OnInitReportOptions(ReportViewerOptions reportOption) { string basePath = _hostingEnvironment.WebRootPath; FileStream inputStream = new FileStream(basePath + @"/Territory Sales.rdl", FileMode.Open, FileAccess.Read); reportOption.ReportModel.Stream = inputStream; } public void OnReportLoaded(ReportViewerOptions reportOption) { } }} Note: You cannot load the application report with path information in ASP.NET Core. So, you should load the report as Stream like an example provided above in OnInitReportOptions. If you need to get the Territory Sales sample report, you can obtain it from the Syncfusion ASP.NET Core sample browser installed location (wwwroot\Territory Sales.rdl). Run the application Run the sample application, and you can see the ReportViewer with Territory Sales as shown in the following screenshot. The ASP.NET Core ReportViewer sample can be downloaded from here. ConclusionI hope you enjoyed learning about how to configure Asp.Net Core Report Viewer in MAC.You can refer to our ASP.NET Core ReportViewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core ReportViewer example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Syncfusion ASP.NET Core ReportViewer allows you to render reports, which are embedded with one another using the subreport report item. The following steps help you to load the RDLC report with subreport item in a Report Viewer: 1. Create a simple ReportViewer application with the help of getting started documentation. 2. Right-click the project and go to the Add New Item dialog. In the dialog, select Report Wizard and name it as MainReport.rdlc for the report, and then click Add. 3. Repeat the step_2 to add the subreport and name it SubReport.rdlc. 4. Right-click the subreport, and then click Subreport Properties. 5. As per RDL standards, you can set the SubReport Path and properties like Microsoft ReportViewer as follows. In the Subreport Properties dialog box, type a name in the Name text box. The name must be unique within the report. 6. You can pass the data source values to the OnReportLoaded method of subreport as shown in the following example. public void OnInitReportOptions(ReportViewerOptions reportOption) { string basePath = _hostingEnvironment.WebRootPath; if (reportOption.SubReportModel != null) { FileStream SubStream = new FileStream(basePath + @"\ReportData\SubReport.rdlc", FileMode.Open, FileAccess.Read); reportOption.SubReportModel.Stream = SubStream; } else { FileStream inputStream = new FileStream(basePath + @"\ReportData\MainReport.rdlc", FileMode.Open, FileAccess.Read); reportOption.ReportModel.Stream = inputStream; } } public void OnReportLoaded(ReportViewerOptions reportOption) { if (reportOption.SubReportModel != null) { reportOption.SubReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData() }); } else { reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopSalesPerson", Value = SalesPersons.GetTopSalesPerson() }); } } List of supported properties of subreport The ReportViewer has the following subreport properties to set the DataSources, Parameters, and more through code behind. DataSources Gets/sets the data sources of the subreport. DataSourceName Gets the data sources names of the subreport. Parameters Gets/sets the parameters to the subreport. ReportPath Gets/sets the report path of the subreport. Stream Sets the report stream to the subreport. Run the application Run the sample application. You can see the RDLC subreport loaded in the ReportViewer as shown in the following screenshot. Download the sample application with subreport from here.
Syncfusion PHP ReportViewer allows you to render reports, which are embedded with one another using the subreport report item. The following steps help you to load the RDLC report with subreport item in a Report Viewer: Create a simple PHP ReportViewer application with the help of getting started documentation. Create a simple Web API report controller application. Right-click the Web API report controller project and go to the Add New Item dialog. In the dialog, select Report Wizard and name it as MainReport.rdlc for the report, and then click Add. Repeat the step_3 to add a subreport and name it SubReport.rdlc. Right-click the subreport, and then click Subreport Properties. As per RDL standards, you can set the SubReport Path and properties like Microsoft ReportViewer as follows. In the Subreport Properties dialog box, type a name in the Name text box. The name must be unique within the report. You can pass the data source values to the OnReportLoaded method of subreport as shown in the following example.public void OnReportLoaded(ReportViewerOptions reportOption) { if (reportOption.SubReportModel != null) { reportOption.SubReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData() }); } else { reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopSalesPerson", Value = SalesPersons.GetTopSalesPerson() }); } } List of supported properties of subreport The ReportViewer has the following subreport properties to set the DataSources, Parameters, and more through code behind. DataSources Gets/sets the data source of the subreport. DataSourceName Gets the data source names of the subreport. Parameters Gets/sets the parameters to the subreport. ReportPath Gets/sets the report path of the subreport. Stream Sets the report stream to the subreport. Run the application Run the sample application. You can see the RDLC subreport loaded in the ReportViewer as shown in the following screenshot. Click here to download the Web API report controller sample. Click here to download the PHP report viewer sample.
Syncfusion ReportDesigner allows you customize the chart report item axis labels using the Format property. This section explains how to set the format for coordinate-based chart types like Column, Bar, Area, Line, and Range through the report property grid. Create a new report and add an embedded data source and dataset. Draw a chart report item. In the report design view, select the chart report item. Assign data to the chart using the Properties dialog. Add data fields to the chart series, category, and values, and then Click OK. Select the x-axis/y-axis (category/value) property. The selected axis property is displayed in the properties grid. In the Labels section, set a static value or expression for the Format property. Here, “#$” has been assigned. Repeat the step_6 to set a format for the chart category axis. In the Labels section, for the Format property, set “#%” or select an expression to provide the dynamic value. Preview the report to view the chart report item with formatted label value. Chart Format: Download the chart format report from here.
The Syncfusion ReactJS ReportViewer has a support to render the SSRS report. Refer to the following documentation link to create a ReportViewer sample in ReactJS. Getting Started documentation. Refer to the following documentation link to create a Web API service sample in ASP.NET Core application. Getting Started documentation. You should pass the SSRS Report Server URL and credentials to retrieve athe report from the SSRS Server in the ReportViewer. Client-side processing The following code snippet demonstrates how to pass a Server URL and report path in ReactJS. ReportViewer.jsx ReactDOM.render( <EJ.ReportViewer id="territoryReportViewer" reportserviceurl={ 'api/ReportApi' } reportserverurl={'http://localhost/ReportServer'} processingmode={"remote"} reportpath={"/CustomerTesting"}> </EJ.ReportViewer>, document.getElementById('container') ); Server-side processing The following code snippet demonstrates how to pass the server credentials. If you use data source with credentials in the designed report, then you should pass the credentials for data source at server-side. HomeController.cs public void OnInitReportOptions(Syncfusion.EJ.ReportViewer.ReportViewerOptions reportOption) { //Adds SSRS Server and Database Credentials here. //reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("<pass Server username>", "<pass password>"); reportOption.ReportModel.ReportServerCredential = newSystem.Net.NetworkCredential("testing", "testing@123"); //reportOption.ReportModel.DataSourceCredentials.Add(new DataSourceCredentials("<pass Datasource name>", "<pass User name>", "<pass password>")); reportOption.ReportModel.DataSourceCredentials.Add(newDataSourceCredentials("FADatasource", "sa", "test@123")); } You can download the sample from the following location. Sample https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASPNETCoreReactNET-Example7609551921415739800.zip Note:In the above sample, our local SSRS Server URL, credentials, and report path are used. So, you could change your SSRS Server URL, credentials, and report path to retrieve a report from the SSRS Server.
Syncfusion ASP.NET ReportViewer allows you to render reports, which are embedded with one another using the subreport report item. The following steps help you to load the RDLC report with subreport item in a ReportViewer: 1. Create a simple ReportViewer application with the help of getting started documentation. 2. Right-click the project and go to the Add New Item dialog. In the dialog, select Report Wizard and name it as MainReport.rdlc for the report, and then click Add. 3. Repeat the step_2 to add the subreport and name it SubReport.rdlc. 4. Right-click the subreport, and then click Subreport Properties. 5. As per the RDL standards, you can set the SubReport Path and properties like Microsoft ReportViewer as follows. In the Subreport Properties dialog box, type a name in the Name text box. The name must be unique within the report. 6. You can pass the data source values to the OnReportLoaded method of subreport as shown in the following example. public void OnReportLoaded(ReportViewerOptions reportOption) { if (reportOption.SubReportModel != null) { reportOption.SubReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData() }); } else { reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopSalesPerson", Value = SalesPersons.GetTopSalesPerson() }); } } List of supported properties of subreport The ReportViewer has the following subreport properties to set the DataSources, Parameters, and more through code behind. DataSources Gets/sets the data source of the subreport. DataSourceName Gets the data source names of the subreport. Parameters Gets/sets the parameters to the subreport. ReportPath Gets/sets the report path of the subreport. Stream Sets the report stream to subreport. Run the application Run the sample application. You can see the RDLC subreport loaded in the ReportViewer as shown in the following screenshot. Download the load subreport sample from here.
Syncfusion Javascript ReportViewer allows you to pass parameter values from client-side to server-side. The following steps guides you to send the parameters from client to server using ‘ajaxBeforeLoad’ API. 1. Create simple ReportViewer application with the help of getting started documentation. 2. Provide the parameter values in client-side and pass as an argument for the ajaxBeforeLoad event as shown in the following code snippet. <script type="text/javascript"> $(function () { $("#container").ejReportViewer( { reportServiceUrl: "/api/ReportApi", reportPath: '~/App_Data/JobRoutingSheet.rdlc', processingMode: ej.ReportViewer.ProcessingMode.Local, parameters: [{ name: 'JobNumber', prompt: "Job Number", labels: ["AAA"], values: ["AAA"], nullable: false }], ajaxBeforeLoad: "ajaxBeforeLoad" }); }); function ajaxBeforeLoad(event){ event.data = event.model.parameters; } ; </script> 3. Get the client-side parameter values in the controller (ReportApiController) from CustomData key in jsonResult of PostReportAction. ReportApiController.cs [EnableCors(origins: "*", headers: "*", methods: "*")] public class ReportApiController : ApiController,IReportController { public string DefaultParam = null; public object PostReportAction(Dictionary < string, object > jsonResult) { if (jsonResult.ContainsKey("CustomData")) { //Gets the parameter values specified in client-side DefaultParam = jsonResult["CustomData"].ToString(); } return ReportHelper.ProcessReport(jsonResult, this); } public void OnReportLoaded(ReportViewerOptions reportOption) { var parameters = new List<ReportParameter>(); if (DefaultParam != null) { parameters = JsonConvert.DeserializeObject<List<ReportParameter>>(DefaultParam); } if (parameters != null && parameters.Count > 0) { reportOption.ReportModel.DataSources.Clear(); //Updates datasource values based on modified report parameter value reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "HeaderDataSet", Value = HeaderDataSet.GetData(parameters[0].Values[0]) }); reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "OperationsDataSet", Value = OperationList.GetData() }); } } Please download the sample for passing parameter from client to server side here
Syncfusion ReportDesigner allows you to create and visualize the data by grouping the data region items. Grouping pane explorer in the design panel displays the row and column groups for the currently selected Tablix data region item. It contains the following two modes. Default Mode: Displays a hierarchical view of the dynamic members for row and column groups. Advanced Mode: Displays both dynamic and static members for row and column groups. The following steps guide you to create a report with the Tablix report item by grouping the data. Create a new report, add embedded datasource and dataset. Draw a table report item and add the fields to table from the report data explorer by expanding Dataset (Sales). In the report design view, click the table to select it. Grouping pane displays the row and column groups of selected items. If you are unable to view the grouping pane after selecting, click View tab in ribbon toolbar and enable the Grouping. To add parent group, right-click the details row groups, click the Add Group, and then select Parent Group from the Row groups. You can add the groups in Tablix report item from ‘Grouping pane’ or through ‘Context Menu’ by selecting the Tablix cell. Then, the Tablix group wizard will open to choose the field from the dropdown list or type the expression in ‘Expression Dialog’ to add a parent or child group. Here, Tablix group based on the unique Product Category value (ProdCat is added as parent group for detail rows). By clicking the OK button, product category [ProdCat] field is added as parent group for sub category [SubCat] field values. Preview the report. To delete a group, in the grouping pane, select and right-click the group that to be removed, and then click Delete Group option. In the Delete Group dialog box, select any one of the following options: Delete group and related rows and columns: Choose this option to delete the group definition and all related rows that displays the group data. For the details group, if the same row belongs to both detail and group data, only the detail data rows are deleted. Delete group only: Choose this option to keep the structure of the table data item the same and delete only the group definition. Click OK. Please download the tablix grouping report here
Syncfusion ASP.Net MVC ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template and CSS style. <div id="ControlRegion" style="height:100% ;position:absolute;"> <div> @(Html.EJ().ReportViewer("reportviewer").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote).ReportPath("~/App_Data/Grouping Aggregate.rdl").ReportServiceUrl("/api/ReportAPI").ReportLoaded("reportLoaded")) </div> @(Html.EJ().ScriptManager()) </div> <script type="text/javascript"> var viewerID = "reportviewer"; function reportLoaded(senderObj) { var $ulContainer = $("#" + viewerID + "_toolbarContainer "); $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {}); var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' }); var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' }); $divouter.append($lifil); $lifil.append($spanfil); $ulContainer.append($divouter); $lifil.hover(function () { $lifil.addClass("e-hover"); }, function () { $lifil.removeClass("e-hover"); }); $divouter.click(function (e) { alert('Action Triggered'); }); } </script> Add the following CSS code example inside the <style> tag in _Layout.cshtml. <style> .e-reportviewer * { -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } .e-mail { width: 20px; height: 20px; margin-top: 1px; } </style> Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap. Download the custom icon toolbar sample from here.
Syncfusion ASP.NET ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template and CSS style. <form id="form1" runat="server" onsubmit="return false" style="overflow: hidden; padding:0; margin: 0;height:100%;width:100%;"> <ej:ReportViewer ID="ReportViewer1" runat="server" OnClientReportLoaded="reportLoaded" ReportPath="~/App_Data/GroupingAgg.rdl" ProcessingMode="Remote"/> </form> <script type="text/javascript"> var viewerID = "ReportViewer1"; function reportLoaded(senderObj) { var $ulContainer = $("#" + viewerID + "_toolbarContainer "); $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {}); var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' }); var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' }); $divouter.append($lifil); $lifil.append($spanfil); $ulContainer.append($divouter); $lifil.hover(function () { $lifil.addClass("e-hover"); }, function () { $lifil.removeClass("e-hover"); }); $divouter.click(function (e) { alert('Action Triggered'); }); } </script> Add the following CSS code example inside the <style> tag in Default.aspx. <style> .e-reportviewer * { -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } .e-mail { width: 20px; height: 20px; margin-top: 1px; } </style> Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap. Download the custom icon toolbar sample from here.NoteA new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Syncfusion Web ReportViewer supports exporting the rendered report into various formats like EXCEL, WORD, PDF, CSV, PPT, and HTML. The exported file will generate zero bytes or PostReportAction will not return resultant data if dependent assemblies of ReportViewer are not published with proper format in IIS hosted environment. To resolve this, ensure that the build version and framework version of the assemblies are unique. List of ReportViewer dependent assemblies are, Syncfusion.Linq.Base Syncfusion.Compression.Base Syncfusion.Presentation.Base Syncfusion.OfficeChart.Base Syncfusion.EJ.ReportViewer Syncfusion.Pdf.Base Syncfusion.XlsIO.Base Syncfusion.DocIO.Base Syncfusion.Shared.Wpf Syncfusion.Chart.Wpf Syncfusion.Gauge.Wpf Syncfusion.SfMaps.Wpf You can find the detailed information here on how to add the reference to the Javascript ReportViewer application through Visual Studio.
Syncfusion ASP.Net Core ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template and CSS style. <ej-report-viewer id="container" report-loaded="reportLoaded" report-service-url="/Home" processing-mode="Remote"></ej-report-viewer> <ej-script-manager></ej-script-manager> <script type="text/javascript"> var viewerID = "container"; function reportLoaded(senderObj) { var $ulContainer = $("#" + viewerID + "_toolbarContainer "); $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {}); var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' }); var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' }); $divouter.append($lifil); $lifil.append($spanfil); $ulContainer.append($divouter); $lifil.hover(function () { $lifil.addClass("e-hover"); }, function () { $lifil.removeClass("e-hover"); }); $divouter.click(function (e) { alert('Action Triggered'); }); } </script> Add the following CSS code example inside the <style> tag in _Layout.cshtml. <style> .e-reportviewer * { -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } .e-mail { width: 20px; height: 20px; margin-top: 1px; } </style> Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap. Download the custom icon toolbar sample from here.
ASP.NET Core ReportViewer default toolbar shows the tooltip text with common language in en-US culture. It supports to customize and localize the texts, tooltip of the user interface (UI) elements. You can create a ReportViewer sample in ASP.NET Core by referring the Getting Started documentation. The following code snippet represents the localized tooltip text of few report viewer toolbar elements in Japanese language to display regional data. <ej-report-viewer locale="ja-JP" id="container" report-service-url="/Home" processing-mode="Local"></ej-report-viewer> <script type="text/javascript"> ej.ReportViewer.Locale["ja-JP"] = { toolbar: { print: { headerText: '印刷', contentText: '印刷' }, exportformat: { headerText: '輸出', contentText: 'エクスポートされたファイル形式を選択します。', Pdf: 'PDF', Excel: 'エクセル', Word: '単語', Html: 'Html', CSV: 'CSV', PPT: 'PPT' }, first: { headerText: '最初の', contentText: 'レポートの最初のページに移動します。' }, previous: { headerText: '前の', contentText: 'レポートの前のページに移動します。' }, next: { headerText: '次の', contentText: 'レポートの次のページに移動します。' }, last: { headerText: '最後の', contentText: 'レポートの最後のページに移動します。' }, parameter: { headerText: 'パラメーター', contentText: '表示またはパラメータペインを非表示にします。' }, zoomIn: { headerText: 'ズーム•イン', contentText: 'レポートに拡大します。' }, zoomOut: { headerText: 'ズームアウト', contentText: 'レポートのズームアウト。' }, refresh: { headerText: 'リフレッシュ', contentText: 'レポートを更新します。' }, printLayout: { headerText: 'プレビュー', contentText: '印刷レイアウトモードと通常モードとの間で変更します。' }, zoom: { headerText: 'ズーム', contentText: 'レポート上のズームインまたはズームアウト。' }, back: { headerText: 'バック', contentText: 'バック親レポートに戻ります。' }, fittopage: { headerText: 'ページに合わせる', contentText: 'コンテナにレポートページを取り付けます。', pageWidth: 'ページ幅', pageHeight: 'ページ全体' }, pagesetup: { headerText: 'ページ設定', contentText: '用紙サイズ、向きや余白を変更するには、ページ設定オプションを選択します。' } }, credential: { userName: 'ユーザー名', password: 'パスワード' }, waterMark: { selectOption: '選択肢を選択', selectValue: '値を選択' }, selectAll: 'すべて選択', viewButton: 'レポートの表示。' }; </script> Run the sample application and you can see the localized ReportViewer like the following screenshot. Please download the reportviewer localization sample hereConclusionI hope you enjoyed learning about how to localize Syncfusion ASP.NET Core ReportViewer.You can refer to our ASP.NET Core ReportViewer's feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ReportViewer example to understand how to create and manipulate data.For current customers, you can check out our ASP.NET Core controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Syncfusion Angular ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template. export class AppComponent { public serviceUrl: string; public reportPath: string; public serverUrl: string; public parameters: any; public actionbuttons: any; constructor() { this.serviceUrl = 'http://localhost:53800/Home'; this.reportPath = 'GroupingAgg.rdl'; } reportLoaded(event) { var viewerID = "reportViewer_Control"; var $ulContainer = $("#" + viewerID + "_toolbarContainer "); var $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {}); var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' }); var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' }); $divouter.append($lifil); $lifil.append($spanfil); $ulContainer.append($divouter); $lifil.hover(function () { $lifil.addClass("e-hover"); }, function () { $lifil.removeClass("e-hover"); }); $divouter.click(function (e) { alert('Action Triggered'); }); } } Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap. Sample Download the custom icon toolbar sample from here Download the Web API report controller sample from here
Syncfusion PHP ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template. <?php require_once 'EJ/AutoLoad.php'; ?> <?php $reportviewer = new EJ\ReportViewer('reportViewer'); echo $reportviewer->reportServiceUrl("http://localhost:62610/api/ReportApi" ) ->processingMode("Remote") ->reportPath("~/App_Data/GroupingAgg.rdl") ->reportLoaded("reportLoaded") ->render(); ?> <style> .cols-sample-area { width: 100%; margin: 0 auto; float: none; } #reportViewer{ height: 550px; display: block; } </style> <script type="text/javascript"> var viewerID = "reportViewer"; function reportLoaded(senderObj) { var $ulContainer = $("#" + viewerID + "_toolbarContainer "); $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {}); var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' }); var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' }); $divouter.append($lifil); $lifil.append($spanfil); $ulContainer.append($divouter); $lifil.hover(function () { $lifil.addClass("e-hover"); }, function () { $lifil.removeClass("e-hover"); }); $divouter.click(function (e) { alert('Action Triggered'); }); } </script> Run Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap. Download the PHP custom icon toolbar sample from here Download the Web API report controller sample from here
Syncfusion JQuery ReportViewer default toolbar shows the tooltip text with common language in en-US culture. It supports to customize and localize the texts, tooltip of the user interface (UI) elements. You can create a ReportViewer sample in PHP by referring the Getting Started documentation. The following code snippet represents the localized tooltip text of few report viewer toolbar elements in Japanese language to display regional data. <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;"> <div class="custom-select"> Culture : <select id="culture" onchange="onChange()"> <option value="en-US">en-US</option> <option value="ja-JP">ja-JP</option> </select> </div> </br> </br> <?php require_once 'EJ/AutoLoad.php'; ?> <?php $reportviewer = new EJ\ReportViewer('reportViewer'); echo $reportviewer->reportServiceUrl("http://localhost:62610/api/ReportApi" ) ->processingMode("Remote") ->reportPath("~/App_Data/GroupingAgg.rdl") ->locale("en-US") ->render(); ?> <script type="text/javascript"> function onChange() { var x = document.getElementById("culture").value; var reportObject = $("#reportViewer").data("ejReportViewer"); reportObject.setModel({ locale: x }); } $(function () { ej.ReportViewer.Locale["ja-JP"] = { toolbar: { print: { headerText: '印刷', contentText: '印刷' }, exportformat: { headerText: '輸出', contentText: 'エクスポートされたファイル形式を選択します。', Pdf: 'PDF', Excel: 'エクセル', Word: '単語', Html: 'Html', CSV: 'CSV', PPT: 'PPT' }, first: { headerText: '最初の', contentText: 'レポートの最初のページに移動します。' }, previous: { headerText: '前の', contentText: 'レポートの前のページに移動します。' }, next: { headerText: '次の', contentText: 'レポートの次のページに移動します。' }, last: { headerText: '最後の', contentText: 'レポートの最後のページに移動します。' }, documentMap: { headerText: 'ドキュメントマップ', contentText: '表示または見出しマップを非表示にする。' }, parameter: { headerText: 'パラメーター', contentText: '表示またはパラメータペインを非表示にします。' }, zoomIn: { headerText: 'ズーム•イン', contentText: 'レポートに拡大します。' }, zoomOut: { headerText: 'ズームアウト', contentText: 'レポートのズームアウト。' }, refresh: { headerText: 'リフレッシュ', contentText: 'レポートを更新します。' }, printLayout: { headerText: 'プレビュー', contentText: '印刷レイアウトモードと通常モードとの間で変更します。' }, pageIndex: { headerText: 'ページ番号', contentText: '現在のページ番号が表示されます。' }, zoom: { headerText: 'ズーム', contentText: 'レポート上のズームインまたはズームアウト。' }, back: { headerText: 'バック', contentText: 'バック親レポートに戻ります。' }, fittopage: { headerText: 'ページに合わせる', contentText: 'コンテナにレポートページを取り付けます。', pageWidth: 'ページ幅', pageHeight: 'ページ全体' }, pagesetup: { headerText: 'ページ設定', contentText: '用紙サイズ、向きや余白を変更するには、ページ設定オプションを選択します。' } }, credential: { userName: 'ユーザー名', password: 'パスワード' }, waterMark: { selectOption: '選択肢を選択', selectValue: '値を選択' }, selectAll: 'すべて選択', viewButton: 'レポートの表示。' }; }); </script> </body> Run the sample application and you can see the localized ReportViewer like the following screenshot. Sample Download the Web API report controller sample here Download PHP localization sample here
Syncfusion jQuery ReportViewer default toolbar shows the tooltip text with common language in en-US culture. It supports to customize and localize the texts, tooltip of the user interface (UI) elements. You can create a ReportViewer sample in Angular by referring the Getting Started documentation. The following code snippet represents the localized tooltip text of few report viewer toolbar elements in Japanese language to display regional data. export class AppComponent { public serviceUrl: string; public reportPath: string; public serverUrl: string; public parameters: any; public actionbuttons: any; public locale: string; public index: number; culture: Array<Object> = []; fieldsvalues: Object; Select(args) { var reportObject = $("#reportViewer_Control").data("ejReportViewer"); reportObject.setModel({ locale: args.value }); } constructor() { this.culture = [ { value: 'en-US', parentId: 'a', text: "en-US" }, { value: 'ja-JP', parentId: 'a', text: "ja-JP" } ]; this.fieldsvalues = { text: "text", value: "value" }; this.index = 1; this.serviceUrl = 'http://localhost:53800/Home'; this.reportPath = 'GroupingAgg.rdl'; ej.ReportViewer.Locale["ja-JP"] = { toolbar: { print: { headerText: '印刷', contentText: '印刷' }, exportformat: { headerText: '輸出', contentText: 'エクスポートされたファイル形式を選択します。', Pdf: 'PDF', Excel: 'エクセル', Word: '単語', Html: 'Html', CSV: 'CSV', PPT: 'PPT' }, first: { headerText: '最初の', contentText: 'レポートの最初のページに移動します。' }, previous: { headerText: '前の', contentText: 'レポートの前のページに移動します。' }, next: { headerText: '次の', contentText: 'レポートの次のページに移動します。' }, last: { headerText: '最後の', contentText: 'レポートの最後のページに移動します。' }, documentMap: { headerText: 'ドキュメントマップ', contentText: '表示または見出しマップを非表示にする。' }, parameter: { headerText: 'パラメーター', contentText: '表示またはパラメータペインを非表示にします。' }, zoomIn: { headerText: 'ズーム•イン', contentText: 'レポートに拡大します。' }, zoomOut: { headerText: 'ズームアウト', contentText: 'レポートのズームアウト。' }, refresh: { headerText: 'リフレッシュ', contentText: 'レポートを更新します。' }, printLayout: { headerText: 'プレビュー', contentText: '印刷レイアウトモードと通常モードとの間で変更します。' }, pageIndex: { headerText: 'ページ番号', contentText: '現在のページ番号が表示されます。' }, zoom: { headerText: 'ズーム', contentText: 'レポート上のズームインまたはズームアウト。' }, back: { headerText: 'バック', contentText: 'バック親レポートに戻ります。' }, fittopage: { headerText: 'ページに合わせる', contentText: 'コンテナにレポートページを取り付けます。', pageWidth: 'ページ幅', pageHeight: 'ページ全体' }, pagesetup: { headerText: 'ページ設定', contentText: '用紙サイズ、向きや余白を変更するには、ページ設定オプションを選択します。' } }, credential: { userName: 'ユーザー名', password: 'パスワード' }, waterMark: { selectOption: '選択肢を選択', selectValue: '値を選択' }, selectAll: 'すべて選択', viewButton: 'レポートの表示。' }; } } Run the sample application and you can see the localized ReportViewer like the following screenshot. Sample Download the Web API report controller sample from here Download angular localization sample from here Conclusion I hope you enjoyed learning about how to localize Syncfusion jQuery ReportViewer. You can refer to our jQuery ReportViewer’s feature tour page to know about its other groundbreaking feature representations. You can also explore our jQuery ReportViewer documentation to understand how to present and manipulate data. For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our jQuery ReportViewer and other jQuery components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Syncfusion ASP.NET Core ReportViewer default toolbar shows the tooltip text with common language in en-US culture. It supports to customize and localize the texts, tooltip of the user interface (UI) elements. You can create a ReportViewer sample in Asp.Net Core by referring the Getting Started documentation. The following code snippet represents the localized tooltip text of few report viewer toolbar elements in Japanese language to display regional data. <script type="text/javascript"> $(function () { ej.ReportViewer.Locale["ja-JP"] = { toolbar: { print: { headerText: '印刷', contentText: '印刷' }, exportformat: { headerText: '輸出', contentText: 'エクスポートされたファイル形式を選択します。', Pdf: 'PDF', Excel: 'エクセル', Word: '単語', Html: 'Html', CSV: 'CSV', PPT: 'PPT' }, first: { headerText: '最初の', contentText: 'レポートの最初のページに移動します。' }, previous: { headerText: '前の', contentText: 'レポートの前のページに移動します。' }, next: { headerText: '次の', contentText: 'レポートの次のページに移動します。' }, last: { headerText: '最後の', contentText: 'レポートの最後のページに移動します。' }, parameter: { headerText: 'パラメーター', contentText: '表示またはパラメータペインを非表示にします。' }, zoomIn: { headerText: 'ズーム•イン', contentText: 'レポートに拡大します。' }, zoomOut: { headerText: 'ズームアウト', contentText: 'レポートのズームアウト。' }, refresh: { headerText: 'リフレッシュ', contentText: 'レポートを更新します。' }, printLayout: { headerText: 'プレビュー', contentText: '印刷レイアウトモードと通常モードとの間で変更します。' }, zoom: { headerText: 'ズーム', contentText: 'レポート上のズームインまたはズームアウト。' }, back: { headerText: 'バック', contentText: 'バック親レポートに戻ります。' }, fittopage: { headerText: 'ページに合わせる', contentText: 'コンテナにレポートページを取り付けます。', pageWidth: 'ページ幅', pageHeight: 'ページ全体' }, pagesetup: { headerText: 'ページ設定', contentText: '用紙サイズ、向きや余白を変更するには、ページ設定オプションを選択します。' } }, credential: { userName: 'ユーザー名', password: 'パスワード' }, waterMark: { selectOption: '選択肢を選択', selectValue: '値を選択' }, selectAll: 'すべて選択', viewButton: 'レポートの表示。' }; $("#container").ejReportViewer( { reportServiceUrl: "/api/ReportApi", reportPath: '~/App_Data/GroupingAgg.rdl', processingMode: ej.ReportViewer.ProcessingMode.Remote, locale: 'ja-JP' }); </script> Run the sample application and you can see the localized ReportViewer like the following screenshot. Download the localization sample here
You can pass report parameter values from client-side to server-side using Syncfusion ASP.NET ASP.NET Core ReportView. The following steps guide you to send the parameters from client to server using the ‘ajax-before-load’ event. 1.Create a simple ReportViewer application with the help of getting started documentation. 2. Provide the parameter values in client-side and pass as an argument for the ajax-before-load event as shown in the following code snippet. Index.cshtml <div style="height: 525px;width: 100%;"> <ej-report-viewer id="reportviewer1" report-service-url="../Home" processing-mode="Local" rendering-begin="renderingBegin" ajax-before-load="ajaxBeforeLoad" /> </div> <script type="text/javascript"> function ajaxBeforeLoad(event) { var parameters = [{ name: 'CustomerID', labels: ['29889'], values: [29889], nullable: false }]; event.data = parameters; }; </script> <ej-script-manager></ej-script-manager> 3. Get the client-side parameter values in the controller (HomeController) from CustomData key in jsonResult of PostReportAction as shown in the following code snippet. HomeController.cs public partial class HomeController : Controller, IReportController { public string DefaultParam = null; [HttpPost] public object PostReportAction([FromBody] Dictionary<string, object> jsonResult) { if (jsonResult.ContainsKey("CustomData")) { //Gets the parameter values specified in client-side DefaultParam = jsonResult["CustomData"].ToString(); } return ReportHelper.ProcessReport(jsonResult, this, this._cache); } public void OnInitReportOptions(ReportViewerOptions reportOption) { string basePath = _hostingEnvironment.WebRootPath; FileStream inputStream = new FileStream(basePath + @"\ReportsTemplate\Region.rdlc", FileMode.Open, FileAccess.Read); reportOption.ReportModel.Stream = inputStream; } public void OnReportLoaded(ReportViewerOptions reportOption) { var parameters = new List<ReportParameter>(); if (DefaultParam != null) { parameters = JsonConvert.DeserializeObject<List<ReportParameter>>(DefaultParam); } if (parameters != null && parameters.Count > 0) { reportOption.ReportModel.DataSources.Clear(); //Updates datasource values based on modified report parameter value reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData(Convert.ToInt32(parameters[0].Values[0])) }); } } } Please download the sample for passing report parameter from client to server side hereConclusionI hope you enjoyed learning about how to pass a report parameter value from client to server in ASP.NET Core ReportViewer. You can refer to our ASP.NET Core ReportView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core ReportView example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The paper size that you specify for the report in the Report Properties will define the pagination for the report while printing and rendering report in the print layout. The extra blank page is created when the body of your report is too wide for your page. If you want the report to appear on a single page, all the content within the report body must fit on the physical page and the body width should be lesser or equal to the following formula. Body Width <= Page Width - (Left Margin + Right Margin) For physical page renderers, the concept of usable area should be important to keep in mind. The area of the physical page that remains after the space is allocated for margins, column spacing, and page header and footer is called the usable page area. Margins are applied only when you render the report in the print layout and printed reports. The following image indicates the margin and usable page area of a physical page. The following formula is used to calculate the usable area of the report rendering. Horizontal usable area: X = Page.Width - (Left Margin + Right Margin + Column Spacing) Vertical usable area: Y = Page.Height - (Top Margin + Bottom Margin + Header Height + Footer Height) Consider the report width is 21 cm, the left margin of the report is 0.5 cm, and the right margin of the report is 0.5 cm. To avoid an extra printed page in the exported PDF file, the following formula is used. width of body (20) + left margin (0.5) + right margin (0.5) <= report width (21) If the width of the body is 20 or lesser, it will be rendered without extra pages. When it uses greater than 20, it will add extra pages.ConclusionI hope you enjoyed learning how to avoid the extra blank pages in print and print preview in JS ReportViewer.You can refer to our JavaScript Report Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Report Viewer example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can create a drilldown report using Syncfusion ReportDesigner, which allows users to show or hide the data interactively using plus and minus symbols on a textbox. The following steps help you to create the drilldown report. Create a new report, add embedded datasource and dataset. Draw a table report item and add the fields to table from the report data explorer by expanding Dataset (Dataset1). In report design view, click the table or matrix to select it. The grouping pane displays the row and column groups of data region item. By clicking the name of a row or column group, you can hide the associated rows or columns. You can change the visibility of a group through property grid or through property dialog. In Hidden option, choose any one of the following options to set the visibility of selected report item. Select False to display the report item. Select True to hide the report item. Select <Expression> to open the Expression dialog box to create an expression that is evaluated at runtime to determine the visibility based on the dynamic values. To specify ToggleItem, open drop-down box and select the name of a textbox to add the toggle. Run the report, it displays the data based on the grouped rows or columns. Click the plus icon to expand the grouped data and minus icon to collapse the data. Sample Please download drilldown report here
Syncfusion Web ReportDesigner allows you to create and visualize the data of an XML data source. An XML data source is provided as a built-in data source type. Use this data source type to connect and retrieve data from an XML that is embedded in the query. The following steps help you to connect with XML data source in a report. 1. Create a report with the help of getting started documentation. 2. Choose an XML type data source by referring the following link. 3. Provide the XML data file containing path as input in connection string like as follows, 4. Click connect button to view the data in code view window type. The root node of an XML for which the data should be populated by executing the query as shown in the following image. XML data report Please download the XML data report here
Syncfusion JavaScript ReportViewer default toolbar shows the tooltip text with common language in en-US culture. It supports to customize and localize the texts, tooltip of the user interface (UI) elements. You can create a ReportViewer sample in Javascript by referring the Getting Started documentation. The following code snippet represents the localized tooltip text of few report viewer toolbar elements in Japanese language to display regional data. <script type="text/javascript"> $(function () { ej.ReportViewer.Locale["ja-JP"] = { toolbar: { print: { headerText: '印刷', contentText: '印刷' }, exportformat: { headerText: '輸出', contentText: 'エクスポートされたファイル形式を選択します。', Pdf: 'PDF', Excel: 'エクセル', Word: '単語', Html: 'Html', CSV: 'CSV', PPT: 'PPT' }, first: { headerText: '最初の', contentText: 'レポートの最初のページに移動します。' }, previous: { headerText: '前の', contentText: 'レポートの前のページに移動します。' }, next: { headerText: '次の', contentText: 'レポートの次のページに移動します。' }, last: { headerText: '最後の', contentText: 'レポートの最後のページに移動します。' }, parameter: { headerText: 'パラメーター', contentText: '表示またはパラメータペインを非表示にします。' }, zoomIn: { headerText: 'ズーム•イン', contentText: 'レポートに拡大します。' }, zoomOut: { headerText: 'ズームアウト', contentText: 'レポートのズームアウト。' }, refresh: { headerText: 'リフレッシュ', contentText: 'レポートを更新します。' }, printLayout: { headerText: 'プレビュー', contentText: '印刷レイアウトモードと通常モードとの間で変更します。' }, zoom: { headerText: 'ズーム', contentText: 'レポート上のズームインまたはズームアウト。' }, back: { headerText: 'バック', contentText: 'バック親レポートに戻ります。' }, fittopage: { headerText: 'ページに合わせる', contentText: 'コンテナにレポートページを取り付けます。', pageWidth: 'ページ幅', pageHeight: 'ページ全体' }, pagesetup: { headerText: 'ページ設定', contentText: '用紙サイズ、向きや余白を変更するには、ページ設定オプションを選択します。' } }, credential: { userName: 'ユーザー名', password: 'パスワード' }, waterMark: { selectOption: '選択肢を選択', selectValue: '値を選択' }, selectAll: 'すべて選択', viewButton: 'レポートの表示。' }; $("#container").ejReportViewer( { reportServiceUrl: "/api/ReportApi", reportPath: '~/App_Data/GroupingAgg.rdl', processingMode: ej.ReportViewer.ProcessingMode.Remote, locale: 'ja-JP' }); </script> Run the sample application and you can see the localized ReportViewer like the following screenshot. Please download the reportviewer localization sample here Further References Common guidelines Online demo of localized reportviewer
