Customizing Report Items Appearance

Custom TextBox and CheckBox Styles

You can customize the appearance of TextBox and CheckBox report items using the CustomCSSClasses property. This allows you to apply specific CSS classes to these elements when they are rendered in the JS Report Viewer.

This feature is particularly useful for UI enhancements, such as styling standard text boxes to resemble interactive buttons within your report.

Pre-defined Styles

The JS Report Viewer deliverables include a default custom stylesheet, jsViewer.custom.styles.css. This file contains pre-defined classes such as:

• ar-button

• ar-button-pressed

You can utilize these styles out-of-the-box or create your own custom CSS file to define unique visual behaviors.

Configuration

To enable custom styles, you must configure the viewer to load your CSS file. Set the reportItemsStyles.cssUri property to the location of your stylesheet during viewer initialization.

import { createViewer } from '@mescius/activereportsnet-viewer';

const viewer = createViewer({
  reportItemsStyles: {
    // Point this to your custom CSS or the default file provided
    cssUri: 'jsViewer.custom.styles.css'
  }
})

Implementation Example

You can see this feature in action in the JSViewer sample.

In the TaxiDriveReport example, the Reset Filter button utilizes the ar-reset-link style, which is defined in the project's wwwroot\custom.styles.css file.