DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易于使用的Visual Studio報表設計器和豐富的報表控件集，包括數據透視表、圖表，因此您可以構建無與倫比、信息清晰的報表。

 DevExpress Reporting控件日前正式發布了v24.1，新版本重點針對報表查看器的一系列功能進行了全面升級等，歡迎下載最新版產品體驗！

DevExpress技術交流群10：532598169      歡迎一起進群討論

Reporting for Web

原生React報表查看器組件

原生React報表查看器組件利用了DevExpress Angular報表查看器的內部架構和相關的輔助技術，與基于JavaScript封裝器的解決方案相比，新版本實現了更好的用戶體驗和性能。新的React報表查看器附帶了以下內置的自定義功能：

自定義工具欄

JavaScript

'use client';
import React from 'react';
import ReportViewer, { Callbacks, RequestSettings } from 'devexpress-reporting-react/dx-report-viewer';
import { TemplateEngine } from 'devexpress-reporting-react/dx-report-viewer/core/template-engine';
import { ActionId } from 'devexpress-reporting/viewer/constants';
import { CustomAction } from 'devexpress-reporting/dx-webdocumentviewer';

import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
import styles from "./page.module.css";

export default function Home() {
const templateEngine = new TemplateEngine();
templateEngine.setTemplate('slideshow', () => (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
<polygon className="dxd-icon-fill" points="4,2 4,22 22,12 " />
</svg>
));

const handleCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
let interval: any;
const action = new CustomAction({
text: "Run Slide Show",
imageTemplateName: "slideshow",
visible: true,
disabled: false,
selected: false,
clickAction: function () {
if (this.selected) {
clearInterval(interval);
this.selected = false;
return;
}
var model = sender.GetPreviewModel();
if (model) {
this.selected = true;
interval = setInterval(function () {
var pageIndex = model.GetCurrentPageIndex();
model.GoToPage(pageIndex + 1);
}, 2000);
}
}
});
args.Actions.push(action);

var highlightEditingFieldsAction = args.GetById(ActionId.HighlightEditingFields);
if (highlightEditingFieldsAction)
highlightEditingFieldsAction.visible = false;
};

return (
<main className={styles.main}>
<ReportViewer reportUrl="Report" templateEngine={templateEngine}>
<RequestSettings invokeAction="/DXXRDV" host="http://localhost:5065" />
<Callbacks CustomizeMenuActions={React.useCallback(handleCustomizeMenuActions,[])} />
</ReportViewer>
</main>
);
}

參數自定義

下面的示例代碼為參數編輯器聲明了一個自定義模板，并將驗證規則應用于NumberBox組件(用于編輯“Age”報告參數值)：

JavaScript

const CustomizeParameterEditor = ({data}: {data: IEditorViewModel}) => (
<NumberBox showSpinButtons={true} value={data.value} disabled={data.disabled}>
<Validator validationRules={data.validationRules}>
</Validator>
</NumberBox>
);

export default function Home() {
const templateEngine = new TemplateEngine();
templateEngine.setTemplate('custom-parameter-editor', CustomizeParameterEditor);

const handleCustomizeParameterEditors = React.useCallback((event: any): void => {
const parameter = event.args.parameter;
const info = event.args.info;
const curYear = new Date().getFullYear();
if (parameter.type === 'CustomParameterType') {
info.validationRules = info.validationRules || [];
info.validationRules.push({
type: 'range',
min: 1900,
max: curYear,
message: `The Birth Year parameter value should be in a range from 1900 to ${curYear}.`
});
info.editor.header = "custom-parameter-editor";
}
}, []);

return (
<main className={styles.main}>
<ReportViewer reportUrl="CustomParameterReport" templateEngine={templateEngine}>
<RequestSettings invokeAction="/DXXRDV" host="http://localhost:2119/" />
<Callbacks CustomizeParameterEditors={handleCustomizeParameterEditors} />
</ReportViewer>
</main>
);
}

原生Angular報表查看器

工具欄自定義API

在這個版本中， （報表查看器）允許您根據需要定制它的內置工具欄，下面的代碼片段使用 事件處理程序隱藏工具欄項：

CustomizeMenuActions(event) {
var actionSearch = event.args.GetById(ActionId.Search);
if (actionSearch)
actionSearch.visible = false;
}

var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
if (highlightEditingFieldsAction)
highlightEditingFieldsAction.visible = false;
}

下面的代碼片段使用相同的事件處理程序將自定義導出選項添加到工具欄：

function CustomizeMenuActions(event) {
const actionExportTo = event.args.GetById(ActionId.ExportTo);
const newFormat = { format: 'NewFormat', text: 'New Format' };
if (actionExportTo) {
actionExportTo.events.on('propertyChanged', (args) => {
const formats = actionExportTo.items[0].items;
if (args.propertyName === 'items' && formats.indexOf(newFormat) === -1) {
formats.push(newFormat);
}
});
}
}

OnPush更改檢測策略支持

DevExpress v24.1還增加了對OnPush更改檢測策略的支持，Angular的OnPush變更檢測策略通過減少不必要的渲染周期和只在輸入引用發生變化時觸發變更檢測來提高性能。通過此更新，可以通過在@Component裝飾器中添加changeDetection屬性，將檢測策略從默認更改為ChangeDetectionStrategy.OnPush，如下所示：

import { Component, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DxReportViewerModule } from 'devexpress-reporting-angular';

@Component ({
selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
CommonModule,
RouterOutlet,
DxReportViewerModule
],
templateUrl: './app.component.html',
styleUrls: [...]
})

export class AppComponent {
title = 'DXReportViewerSample';
reportUrl: string = 'TestReport';
hostUrl: string = '//localhost:5001/';
invokeAction: string = '/DXXRDV';
}

ASP. NET Core、Blazor、Angular的全新獨立參數面板組件

全新的Report Parameters Panel（報表參數面板）組件基于從后端提供的報表實例自動為報表參數編輯器(包括關聯的分組)生成布局。

該組件解決了各種使用場景，包括需要以編程方式創建報表并將其導出或通過郵件發送，無需向最終用戶顯示其打印預覽。新的獨立參數面板有助于減少應用程序的整體內存占用，因為它消除了在后臺生成報表圖像并將其發送到客戶端應用程序的需要。

組件實現基于報表查看器組件中的參數面板，因此它允許您訪問與報表參數相關的同一組組件公共屬性和事件，下面是Angular平臺上的一個組件定義示例：

<dx-report-parameters-panel class="parametersPanel" [reportUrl]="yourReportName" height="560px" width="400px">
<dxrpp-request-options [invokeAction]="invokeAction" host="http://yourhostname:port/"></dxrpp-request-options>
<dxrpp-callbacks (BeforeRender)="onBeforeRender($event)"></dxrpp-callbacks>
</dx-report-parameters-panel>

該面板允許您創建自定義提交按鈕并處理相關的單擊事件，這將使您能夠序列化輸入參數值，將它們發送到后端應用程序，然后將其應用到XtraReport類的實例中(在打印或導出操作之前)：

下面的代碼片段在后端應用參數值：

C#

public async Task<IActionResult> ExportWithParameters(
[FromServices]IReportParametersSerializer reportParametersSerializer,
[FromForm]string serializedParameters,
[FromForm]string reportUrl) {
var report = await reportParametersSerializer.ApplyParametersStateAsync(reportUrl, serializedParameters);
report.ExportToPdf("yourFilePath");
return Ok(new { Message = "A report has been successfully exported" });
}

Web報表設計器 - 隱藏/限制參數編輯

新版本引入一組新的API來幫助自定義參數、參數組和參數分隔符的編輯設置，當創建一組帶有強制/隱藏參數的"canned"或預定義報告時，此API將很有價值。

新的類包含以下影響屬性面板、字段列表和參數編輯器的設置：

• - 隱藏參數添加和刪除按鈕。
• - 隱藏參數組添加和刪除按鈕。
• - 隱藏參數分隔符添加和刪除按鈕。
• - 禁用參數和組的屬性編輯器。
• - 隱藏向上和向下按鈕并禁用拖放操作。

下面的代碼片段將ASP. NET Core應用程序的參數、參數組和分隔符變為只讀(用戶不能添加/刪除參數/組/分隔符，編輯/重新排序相關屬性)：

Razor

@{
var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
.ParameterEditingSettings( configure => {
configure.AllowEditParameterCollection = false;
configure.AllowEditParameterSeparators = false;
configure.AllowEditParameterGroups = false;
configure.AllowEditProperties = false;
configure.AllowReorderParameters = false })
.Height("100%")
.Bind("TestReport");
@designerRender.RenderHtml()
}

新版本還引入了一個新的CustomizeParameterProperties事件，允許您在Web報表設計器級別自定義特定參數或禁用/隱藏特定屬性編輯器。

例如，下面的代碼片段隱藏了所有參數的允許空值屬性編輯器(在屬性面板和參數編輯器中)，并隱藏了參數組的刪除按鈕：

function customizeParameterProperties(s, e) {
if (e.parameter) {
let allowNullInfo = e.getEditor('allowNull');
if (allowNullInfo) {
allowNullInfo.visible = false;
}
}
if (e.parameterPanelLayoutItem.layoutItemType === 'Group') {
e.editOptions.allowDelete = false;
}
}