翻譯|產(chǎn)品更新|編輯:龔雪|2024-07-26 10:58:09.520|閱讀 101 次
概述:DevExpress Reporting控件日前正式發(fā)布了v24.1,新版本重點針對報表查看器的一系列功能進行了全面升級等,歡迎下載最新版產(chǎn)品體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
DevExpress Reporting是.NET Framework下功能完善的報表平臺,它附帶了易于使用的Visual Studio報表設(shè)計器和豐富的報表控件集,包括數(shù)據(jù)透視表、圖表,因此您可以構(gòu)建無與倫比、信息清晰的報表。
DevExpress Reporting控件日前正式發(fā)布了v24.1,新版本重點針對報表查看器的一系列功能進行了全面升級等,歡迎下載最新版產(chǎn)品體驗!
DevExpress技術(shù)交流群10:532598169 歡迎一起進群討論
原生React報表查看器組件利用了DevExpress Angular報表查看器的內(nèi)部架構(gòu)和相關(guān)的輔助技術(shù),與基于JavaScript封裝器的解決方案相比,新版本實現(xiàn)了更好的用戶體驗和性能。新的React報表查看器附帶了以下內(nèi)置的自定義功能:
自定義工具欄
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>
);
}
參數(shù)自定義
下面的示例代碼為參數(shù)編輯器聲明了一個自定義模板,并將驗證規(guī)則應(yīng)用于NumberBox組件(用于編輯“Age”報告參數(shù)值):
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>
);
}
工具欄自定義API
在這個版本中, (報表查看器)允許您根據(jù)需要定制它的內(nèi)置工具欄,下面的代碼片段使用 事件處理程序隱藏工具欄項:
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;
}
下面的代碼片段使用相同的事件處理程序?qū)⒆远x導出選項添加到工具欄:
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變更檢測策略通過減少不必要的渲染周期和只在輸入引用發(fā)生變化時觸發(fā)變更檢測來提高性能。通過此更新,可以通過在@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';
}
全新的Report Parameters Panel(報表參數(shù)面板)組件基于從后端提供的報表實例自動為報表參數(shù)編輯器(包括關(guān)聯(lián)的分組)生成布局。
該組件解決了各種使用場景,包括需要以編程方式創(chuàng)建報表并將其導出或通過郵件發(fā)送,無需向最終用戶顯示其打印預(yù)覽。新的獨立參數(shù)面板有助于減少應(yīng)用程序的整體內(nèi)存占用,因為它消除了在后臺生成報表圖像并將其發(fā)送到客戶端應(yīng)用程序的需要。
組件實現(xiàn)基于報表查看器組件中的參數(shù)面板,因此它允許您訪問與報表參數(shù)相關(guān)的同一組組件公共屬性和事件,下面是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>
該面板允許您創(chuàng)建自定義提交按鈕并處理相關(guān)的單擊事件,這將使您能夠序列化輸入?yún)?shù)值,將它們發(fā)送到后端應(yīng)用程序,然后將其應(yīng)用到XtraReport類的實例中(在打印或?qū)С霾僮髦?:
下面的代碼片段在后端應(yīng)用參數(shù)值:
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" });
}
新版本引入一組新的API來幫助自定義參數(shù)、參數(shù)組和參數(shù)分隔符的編輯設(shè)置,當創(chuàng)建一組帶有強制/隱藏參數(shù)的"canned"或預(yù)定義報告時,此API將很有價值。
新的類包含以下影響屬性面板、字段列表和參數(shù)編輯器的設(shè)置:
下面的代碼片段將ASP. NET Core應(yīng)用程序的參數(shù)、參數(shù)組和分隔符變?yōu)橹蛔x(用戶不能添加/刪除參數(shù)/組/分隔符,編輯/重新排序相關(guān)屬性):
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報表設(shè)計器級別自定義特定參數(shù)或禁用/隱藏特定屬性編輯器。
例如,下面的代碼片段隱藏了所有參數(shù)的允許空值屬性編輯器(在屬性面板和參數(shù)編輯器中),并隱藏了參數(shù)組的刪除按鈕:
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;
}
}
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)