Reporting for ASP.NET MVC - How to Create a Custom Color Scheme for Web Report Designer and Document Viewer

This example creates a custom color scheme for the Web Document Viewer and End-User Report Designer. The custom color scheme is based on the "light" predefined color scheme.

This example is an ASP.NET MVC application. However, the approach used to customize the color scheme is the same for all Web platforms.

The Color Scheme Customization online demo customizes a color scheme and saves the result. Online demos are available for different platforms:

• ASP.NET WebForms Online Demo
• ASP.NET MVC Online Demo
• ASP.NET Core Online Demo

The demo produces custom styles in two files - devextreme.light.custom.css and reporting.light.custom.css. Copy these files to the application's Content folder.

• The devextreme.light.custom.css file contains changed CSS styles for DevExtreme UI widgets that reporting controls internally use.

• The reporting.light.custom.css file contains changed CSS styles (grouped by categories) that define the common appearance of reporting controls.

Specify the base color scheme with the GetStyleSheets method and link the reporting and DevExtreme CSS files to the Document Viewer and Report Designer pages.

Files to Review

• _Layout.cshtml
• Viewer.cshtml
• Designer.cshtml
• devextreme.light.custom.css
• reporting.light.custom.css

Documentation

• ASP.NET Webforms Documentation
• ASP.NET MVC Documentation
• ASP.NET Core Documentation

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)