Main Features
- 4 minutes to read
The client-side End-User Web Report Designer is available for both ASP.NET WebForms and ASP.NET MVC applications.
System Requirements
To run the Web Report Designer, the following script files should be installed on the client web browser.
- jQuery 1.11.3+
jQuery UI 1.11.4+ (both JavaScript and CSS files)
The following scripts are required.
- core.js
- widget.js
- mouse.js
- draggable.js
- resizable.js
- selectable.js
To assemble a custom jQuery UI library that includes the required scripts, visit the following page: Download Builder.
-
The Report Designer requires the core Globalize script and four Globalize modules (message, number, date and currency), as well as some cldrjs scripts. Here is a list of the required Globalize scripts:
<script src="js/cldr.js"></script> <script src="js/cldr.event.js"></script> <script src="js/cldr.supplemental.js"></script> <script src="js/cldr.unresolved.js"></script> <script src="js/globalize.js"></script> <script src="js/globalize/message.js"></script> <script src="js/globalize/number.js"></script> <script src="js/globalize/currency.js"></script> <script src="js/globalize/date.js"></script>Read more about Globalize modules and requirements in the Globalize documentation.
The basic cldr content needed for the Report Designer is included in the library. But for locales other than “en” (or currencies other than “USD”), cldr content should be loaded additionally (read more in the Globalize documentation).
- knockout 3.3.0+
- ace.js 1.1.9+
All JavaScript files should be downloaded and placed into your application’s Scripts folder, and the correct paths to these libraries should be set in the src attribute. All CSS files should be placed into the Content folder. You can also download and install these files automatically using NuGet.
To include these script files in a client application, do one of the following.
Automatic Integration
Include these client-side libraries on the web page automatically by adding the “resources” section to the application’s Web.config file, as shown below.
<devExpress> <!-- ... --> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress>Manual Integration
To avoid automatic loading of any libraries by a control (e.g., when such libraries are already referenced on the web page), do the following.
Declare an empty “resources” section in the Web.config file.
<resources> </resources>Manually attach DevExtreme resources and the required third-party libraries (such as jQuery and Globalize) to the web page.
<html> <head> <script src="Scripts/jquery-1.11.3.min.js"></script> <script src="Scripts/jquery-ui-1.11.4.custom.min.js"></script> <script src="Scripts/knockout-3.3.0.js"></script> <script src="Scripts/globalize/cldr.js"></script> <script src="Scripts/globalize/cldr.event.js"></script> <script src="Scripts/globalize/cldr.supplemental.js"></script> <script src="Scripts/globalize/cldr.unresolved.js"></script> <script src="Scripts/globalize/globalize.js"></script> <script src="Scripts/globalize/globalize.message.js"></script> <script src="Scripts/globalize/globalize.number.js"></script> <script src="Scripts/globalize/globalize.currency.js"></script> <script src="Scripts/globalize/globalize.date.js"></script> <script src="Scripts/ace/ace.js"></script> <script src="Scripts/ace/ext-language_tools.js"></script> <script src="Scripts/ace/theme-dreamweaver.js"></script> <script src="Scripts/ace/theme-ambiance.js"></script> <link href="Content/jquery-ui-1.11.4.custom.min.css" type="text/css" rel="Stylesheet" /> ... </head> ... </html>
Note
Deleting the DevExpress “resources” section from the Web.config file will enable the default behavior (with automatic loading only of DevExtreme, without adding third-party libraries).
To learn more about this configuration, see Embedding Third-Party Libraries.
For a sample project illustrating how to include these libraries manually, see the following article online: Why doesn’t the ASPxReportDesigner control/MVC ReportDesigner extension work and client-side errors are thrown.
For a list of web browsers supported by the Web Report Designer, refer to the following document: Supported Browsers.
Report Designer Demo
To run the Report Designer demo locally, open the Demo Center and run its ASP.NET Technical Demos module.
Select Reporting Tool and run the Master-Detail Report demo. After the demo is launched, click Run Designer on the Report Toolbar.
To run the Report Designer online demo, visit the following pages.
Main Features
The Web Report Designer’s main features:
- a JavaScript/HTML5 engine that provides a responsive user interface for in-browser reporting on the client;
- an integrated Property Grid, a Quick Access panel to edit commonly used options, a Data Explorer and Parameters panels;
- a rich set of report controls (see the End-User Reporting section of the Getting Started with DevExpress Reporting document for a complete list of available controls);
- easy location and alignment of report elements using snap lines and a snap grid;
- cross-browser compatibility;
- support for localization and switchable visual themes.
Current Limitations
The current version of the Web Report Designer has the following limitations.
- Graphical report controls, such as Using Gauges and Sparklines or Adding Gauges to a Report, are not fully rendered on the design surface.
- In-place editing of the Rich Text control’s content is not yet supported.
- To be able to print a report, the Report Designer’s Print Preview first converts it to PDF, which requires that the web browser supports PDF printing.
- At present, the Web Report Designer does not meet all requirements of accessibility compliance.