Search results

Getting Started

This section explains you the steps required to render the Report Designer component with your application.

HTML file creation

Create a basic HTML file and place it in a separate folder. Add the below code snippet,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Report Designer first HTML page</title>
    </head>
    <body>
    </body>
</html>

Refer Scripts and CSS

Directly refer the required scripts and style sheets that are mandatorily required to render the Report Designer, from CDN links.

Refer to the Dependencies to learn more details about Report Designer dependent scripts and style sheets links.

You can use the following code in <head> tag of the HTML page as in the following order.

<link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reportdesigner.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.common.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.widgets.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.report-designer-widgets.min.js"></script>
<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-viewer.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-designer.min.js" type="text/javascript"></script>

Initialize Report Designer

Add the <div> element within the <body> section, which acts as a container for ejReportDesigner widget to render and then initialize the ejReportDesigner widget within the script section as shown below,

        <!-- Creating a div tag which will act as a container for ejReportDesigner widget.-->
        <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").ejReportDesigner();
            });
        </script>

Create Web API service

The Report Designer requires a Web API service to process the data and file actions, so you must create any one of the following Web API service.

This tutorial uses the same Web API service application created in Create ASP.NET Web API Service tutorial.

Set service URL

Set the Web API controller name to the serviceUrl property of the Report Designer.

Add the following code in the <body> tag of the Report Designer HTML page.

        <!-- Creating a div tag which will act as a container for ejReportDesigner widget.-->
        <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").ejReportDesigner({
                    serviceUrl: "/api/ReportingAPI"
                });
            });
        </script>

Run the application

Build and run the application. Preview and edit the result using the following.

index.html
index.js
ReportingAPIController.cs
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
        <div id="designer" style="position: absolute; height: 100%; width: 100%;"></div>
        <script src="index.js"></script>
    </body>
    $(function () {
        $("#designer").ejReportDesigner({
            serviceUrl: "https://reports.syncfusion.com/demos/services/api/ReportingAPI"
        });
    });
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Syncfusion.Reporting.Web;
using Syncfusion.Reporting.Web.ReportViewer;
using Syncfusion.Reporting.Web.ReportDesigner;

namespace ReportDesignerAPIService
{
    [System.Web.Http.Cors.EnableCors(origins: "*", headers: "*", methods: "*")]
    public class ReportingAPIController : ApiController, IReportDesignerController
    {
        /// <summary>Get the Specific file information</summary>
        /// <param name="filename">Name of the file to download</param>
        /// <param name="isOverride">Boolean state to override the file</param>
        /// <returns>Returns the information about the file</returns>
        public FileModel GetFile(string filename, bool isOverride)
        {
            throw new NotImplementedException();
        }

        /// <summary>
        /// Get the path of specific file
        /// </summary>
        /// <param name="FileType">Name of the file to get the full path</param>
        /// <returns>Returns the full path of file</returns>
        public string GetFilePath(string fileName)
        {
            string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/");
            targetFolder += "Cache";

            if (!System.IO.Directory.Exists(targetFolder))
            {
                System.IO.Directory.CreateDirectory(targetFolder);
            }

            if (!System.IO.Directory.Exists(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken))
            {
                System.IO.Directory.CreateDirectory(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken);
            }

            var folderPath = System.Web.HttpContext.Current.Server.MapPath("~/") + "Cache\\" + ReportDesignerHelper.EJReportDesignerToken + "\\";
            return folderPath + fileName;
        }

        /// <summary>
        /// Get the file list based on file type
        /// </summary>
        /// <param name="FileType">Supported file extensions</param>
        /// <returns>Returns the list of information about the files</returns>
        public List<FileModel> GetFiles(FileType fileType)
        {
            throw new NotImplementedException();
        }

        /// <summary>
        /// Action (HttpGet) method for getting resource for report images.
        /// </summary>
        /// <param name="key">The unique key for request identification.</param>
        /// <param name="image">The name of requested image.</param>
        /// <returns>The object data.</returns>
        [System.Web.Http.ActionName("GetImage")]
        [AcceptVerbs("GET")]
        public object GetImage(string key, string image)
        {
            return ReportDesignerHelper.GetImage(key, image, this);
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for designer actions.
        /// </summary>
        /// <param name="jsonData">The JSON data posted for processing designer request.</param>
        /// <returns>The object data.</returns>
        public object PostDesignerAction(Dictionary<string, object> jsonData)
        {
            //Processes the designer request and returns the result.
            return ReportDesignerHelper.ProcessDesigner(jsonData, this, null);
        }

        /// <summary>
        /// File upload method that is call while upload a file.
        /// </summary>
        /// <param name="httpPostedFile">Details about uploaded files</param>
        public bool UploadFile(System.Web.HttpPostedFile httpPostedFile)
        {
            string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/");
            string fileName = !string.IsNullOrEmpty(ReportDesignerHelper.SaveFileName) ? ReportDesignerHelper.SaveFileName : System.IO.Path.GetFileName(httpPostedFile.FileName);
            targetFolder += "Cache";

            if (!System.IO.Directory.Exists(targetFolder))
            {
                System.IO.Directory.CreateDirectory(targetFolder);
            }

            if (!System.IO.Directory.Exists(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken))
            {
                System.IO.Directory.CreateDirectory(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken);
            }

            httpPostedFile.SaveAs(targetFolder + "\\" + ReportDesignerHelper.EJReportDesignerToken + "\\" + fileName);
            return true;
        }


        /// <summary>
        /// Action (HttpPost) method for uploaded file actions.
        /// </summary>
        public void UploadReportAction()
        {
            //Processes the designer file upload request's.
            ReportDesignerHelper.ProcessDesigner(null, this, System.Web.HttpContext.Current.Request.Files[0]);
        }

        /// <summary>
        /// Action (HttpGet) method for getting resource to report.
        /// </summary>
        /// <param name="key">The unique key to get the required resource.</param>
        /// <param name="resourceType">The type of the requested resource.</param>
        /// <param name="isPrinting">If set to <see langword="true"/>, then the resource is generated for printing.</param>
        /// <returns>The object data.</returns>
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourceType, bool isPrinting)
        {
            //Returns the report resource for the requested key.
            return ReportHelper.GetResource(key, resourceType, isPrinting);
        }

        /// <summary>
        /// Report Initialization method that is triggered when report begin processed.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

            reportOption.ReportModel.ExportResources.Scripts = new List<string>
            {
                resourcesPath + @"\reports\common\ej.reporting.common.min.js",
                resourcesPath + @"\reports\common\ej.reporting.widgets.min.js",
                //Chart component script
                resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
                //Gauge component scripts
                resourcesPath + @"\reports\data-visualization\ej.lineargauge.min.js",
                resourcesPath + @"\reports\data-visualization\ej.circulargauge.min.js",
                //Map component script
                resourcesPath + @"\reports\data-visualization\ej.map.min.js",
                //Report viewer Script
                resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
                resourcesPath + @"\reports\ej.report-viewer.min.js"
            };

            reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
            {
                resourcesPath + @"\jquery-1.7.1.min.js"
            };
        }

        /// <summary>
        /// Report loaded method that is triggered when report and sub report begins to be loaded.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for report process.
        /// </summary>
        /// <param name="jsonData">The JSON data posted for processing report.</param>
        /// <returns>The object data.</returns>
        public object PostReportAction(Dictionary<string, object> jsonData)
        {
            //Processes the report request and returns the result.
            return ReportHelper.ProcessReport(jsonData, this as IReportController);
        }
    }
}