Search results

Getting Started

This section explains the steps required to render a ReportDesigner in your ASP.NET Web Forms application.

Create ASP.NET Web Forms application

  1. Open Visual Studio 2017, click the File menu, go to New, and then select Project.
  2. Go to Installed > Visual C# > Web, and then select the required .NET Framework in the drop-down.
  3. Select ASP.NET Web Application (.NET Framework), change the application name, and then click OK. Project Creation Wizard
  4. Then choose the Web Forms in template, enable Web API option in the Add folders and core references for: section. Razor view engine

Add Assembly References

  1. Right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

    Refer to the NuGet Packages to learn more details about installing and configuring Report Designer NuGet packages.

  2. Search for Syncfusion.Reporting.Web and Syncfusion.Reporting.WebForms NuGet packages, and install them in your Web Forms application.

    Package Purpose
    Syncfusion.Reporting.Web Creates Web API service for processing the reports.
    Syncfusion.Reporting.WebForms Contains tag helpers to create client-side Report Designer control.
  3. Open Web.config file and add the Syncfusion.Reporting.WebForms assembly reference to the <system.web.pages.controls> element with SF tag prefix.

    <configuration>
        ....
        ....
        <system.web>
            ....
            <pages>
            ....
            <controls>
                <add assembly="Syncfusion.Reporting.WebForms" namespace="Syncfusion.Reporting.WebForms" tagPrefix="SF" />
                ....
            </controls>
            </pages>
        </system.web>
        ....
        ....
    </configuration>

Refer Scripts and Styles

The Syncfusion.Reporting.JavaScript contains scripts and style sheets of reporting components. It is a dependent package for Syncfusion.Reporting.WebForms. When installing the Syncfusion.Reporting.WebForms, the Syncfusion.Reporting.JavaScript package is also installed. The scripts and styles required for Report Designer are added into the Scripts and Content folders of your application.

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

You can use the following code in the <asp> tag of Default.aspx page.

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link href="Content/reports/default-theme/ej.reports.all.min.css" rel="stylesheet" />
    <link href="Content/reports/default-theme/ej.reportdesigner.min.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/lib/codemirror.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/addon/hint/show-hint.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="Scripts/CodeMirror/lib/codemirror.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/show-hint.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
    <script src="Scripts/CodeMirror/mode/sql/sql.js"></script>
    <script src="Scripts/CodeMirror/mode/vb/vb.js"></script>
    <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
    <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
    <script src="Scripts/reports/common/ej.report-designer-widgets.min.js"></script>
    <!--Chart component script added before the report designer script to render chart report item in reports-->
    <script src="Scripts/reports/data-visualization/ej.chart.min.js"></script>
    <!-- Report Viewer component script-->
    <script src="Scripts/reports/ej.report-viewer.min.js"></script>
    <!-- Report Designer component script-->
    <script src="Scripts/reports/ej.report-designer.min.js"></script>
    </asp:Content>

Add Control in ASPX Page

Initialize the Report Designer as shown in the following code sample in the Default.aspx page.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link href="Content/reports/default-theme/ej.reports.all.min.css" rel="stylesheet" />
    <link href="Content/reports/default-theme/ej.reportdesigner.min.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/lib/codemirror.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/addon/hint/show-hint.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="Scripts/CodeMirror/lib/codemirror.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/show-hint.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
    <script src="Scripts/CodeMirror/mode/sql/sql.js"></script>
    <script src="Scripts/CodeMirror/mode/vb/vb.js"></script>
    <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
    <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
    <script src="Scripts/reports/common/ej.report-designer-widgets.min.js"></script>
    <!--Chart component script added before the report designer script to render chart report item in reports-->
    <script src="Scripts/reports/data-visualization/ej.chart.min.js"></script>
    <!-- Report Viewer component script-->
    <script src="Scripts/reports/ej.report-viewer.min.js"></script>
    <!-- Report Designer component script-->
    <script src="Scripts/reports/ej.report-designer.min.js"></script>
    <div style="height: 650px;width: 950px">
    <SF:ReportDesigner runat="server" ID="designer"></SF:ReportDesigner>
    </div>
</asp:Content>

Add API controller

The ASP.NET ReportDesigner uses Web API services to process the report file and to process the request from control.

  1. Right-Click on the Controllers folder in the application and select Add then click New Item.
  2. Select Web API Controller Class from the listed templates and name the controller as ReportingAPIController.cs. Provide controller name
  3. Click Add. Controller folder

While adding Web API Controller class, name it with the suffix Controller that is mandatory.

Configure Web API

The interface IReportDesignerController has the declaration of action methods that are defined in Web API Controller to retrieve data, save, edit and browse reports from the server. The IReportDesignerController has the following action methods declaration.

Methods Description
PostDesignerAction Action (HttpPost) method for posting the request for designer actions.
UploadReportAction Action (HttpPost) method for posted file actions.
UploadFile File upload method that is call while upload a file.
GetImage Action (HttpGet) method for getting resource for report images.
GetFilePath Get the path of specific file
GetFile Get the Specific file information
GetFiles Get the file list based on file type
PostReportAction Action (HttpPost) method for posting the request for report process.
GetResource Action (HttpGet) method for getting resource for report.
OnInitReportOptions Report initialization method that occurs when the report is about to be processed.
OnReportLoaded Report loaded method that occurs when the report and sub report start loading.

ReportDesignerHelper

The class ReportDesignerHelper contains helper methods that help to process Post or Get request from the Report Designer control and returns the response to the Report Designer control. It has the following methods.

Methods Description
GetResource Returns the report resource for the requested key.
ProcessReport Processes the report request and returns the result.

ReportHelper

The class ReportHelper contains helper methods that helps to process the Post or Get request on report preview action and returns the response to the Report Designer. It has the following methods.

Methods Description
GetResource Returns the report resource for the requested key.
ProcessReport Processes the report request and returns the result.

Please add the following code example in ReportingAPIController.cs.

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 ReportDesignerSample.Controllers
{
    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);
        }
    }
}

Add routing information

  1. Open the WebApiConfig.cs file from App_Start folder of your application.
  2. Modify the routeTemplate in Register event to include the {action} parameter in the URI as follows.
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
            );
        }
    }

Set the service URL

To browse, open and save the reports in the application, set the WebAPI controller name to the ServiceUrl property of the Report Designer. You can use the following code in the Default.aspx page.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link href="Content/reports/default-theme/ej.reports.all.min.css" rel="stylesheet" />
    <link href="Content/reports/default-theme/ej.reportdesigner.min.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/lib/codemirror.css" rel="stylesheet" />
    <link href="Scripts/CodeMirror/addon/hint/show-hint.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="Scripts/CodeMirror/lib/codemirror.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/show-hint.js"></script>
    <script src="Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
    <script src="Scripts/CodeMirror/mode/sql/sql.js"></script>
    <script src="Scripts/CodeMirror/mode/vb/vb.js"></script>
    <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
    <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
    <script src="Scripts/reports/common/ej.report-designer-widgets.min.js"></script>
    <!--Chart component script added before the report designer script to render chart report item in reports-->
    <script src="Scripts/reports/data-visualization/ej.chart.min.js"></script>
    <!-- Report Viewer component script-->
    <script src="Scripts/reports/ej.report-viewer.min.js"></script>
    <!-- Report Designer component script-->
    <script src="Scripts/reports/ej.report-designer.min.js"></script>
    <div style="height: 650px;width: 950px">
    <SF:ReportDesigner runat="server" ID="designer" ServiceUrl="/api/ReportingAPI">
    </SF:ReportDesigner>
    </div>
</asp:Content>

Run the Application

Run the sample application and you can see the ReportDesigner on the page as displayed in the following screenshot.

Report Designer demo