獲取DevExpress v23.2正式版下載

DevExpress技術(shù)交流群9：909157416      歡迎一起進(jìn)群討論

自定義控件集成

DevExpress Reports中的自定義報(bào)表控件注冊(cè)變得更加容易，為了滿足web開(kāi)發(fā)人員的需求，DevExpressv23.1+包括簡(jiǎn)化的自定義控件注冊(cè)支持(在服務(wù)器級(jí)別實(shí)現(xiàn))。如果您的解決方案需要使用自定義報(bào)表控件，所需要做的就是將控件添加到服務(wù)器端報(bào)表設(shè)計(jì)模型中的自定義控件集合中，JavaScript函數(shù)、屬性和值將自動(dòng)生成。

圓角標(biāo)簽 - 多平臺(tái)的自定義控件

讓我們創(chuàng)建一個(gè)示例應(yīng)用程序(適用于所有支持的Web平臺(tái))，以幫助說(shuō)明自定義報(bào)表控件注冊(cè)過(guò)程的靈活性。

下面的GitHub示例演示了自定義報(bào)表控件的創(chuàng)建/使用：

第一個(gè)例子是通用的：探索我們的實(shí)現(xiàn)來(lái)學(xué)習(xí)如何創(chuàng)建圓角的自定義報(bào)表控件——XRRoundLabel和XRRoundPanel。按照以下步驟在web應(yīng)用程序中注冊(cè)XRRoundLabel控件。

1. 從下載該項(xiàng)目。

2. 打開(kāi)Blazor示例解決方案，并將DevExpress.XtraReports.CustomControls.RoundedControls項(xiàng)目添加到解決方案中，在Blazor樣例項(xiàng)目中引用該項(xiàng)目。

3. 重新構(gòu)建解決方案。

4. 將XRRoundControl類(lèi)型添加到自定義控件的報(bào)表設(shè)計(jì)器集合中：

@page "/reportdesigner"
<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)"
Width="100%" AllowMDI="true"
CustomControlTypes="@customTypes">
<DxReportDesignerWizardSettings UseFullscreenWizard="true" />
</DxReportDesigner>
@code {
List<Type> customTypes = new List<Type> {
typeof(DevExpress.XtraReports.CustomControls.RoundBordersControls.XRRoundLabel) };
}

最后，啟動(dòng)應(yīng)用程序。您將看到自定義控件出現(xiàn)在工具欄中(帶有默認(rèn)的問(wèn)號(hào)圖標(biāo))：

圖標(biāo)、工具提示和工具欄位置 - 客戶(hù)端配置

要更改默認(rèn)圖標(biāo)，請(qǐng)?zhí)砑右粋€(gè)SVG模板，其名稱(chēng)與自定義控件的完全限定類(lèi)型名稱(chēng)相匹配：

<script type="text/html" id="dxrd-svg-toolbox-devexpress_xtrareports_customcontrols_roundborderscontrols_xrroundlabel">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M22.7 28H27L18.3 4h-4.7L5 28h4.3l2.2-6h9.1l2.1 6Zm-9.8-10L16 9.4l3.1 8.6h-6.2Z" fill="#1177D7"/>
<rect x="1" y="1" width="30" height="30" rx="5" stroke="#727272" stroke-width="2"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h32v32H0z"/>
</clipPath>
</defs>
</svg>
</script>

要更改工具提示并指定工具欄中的位置，請(qǐng)按如下方式處理客戶(hù)端CustomizeToolbox事件：

@page "/reportdesigner"

<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)"
Width="100%" AllowMDI="true"
CustomControlTypes="@customTypes">
<DxReportDesignerWizardSettings UseFullscreenWizard="true" />
<DxReportDesignerCallbacks CustomizeToolbox="onCustomizeToolbox" />
</DxReportDesigner>

@code {
List<Type> customTypes = new List<Type> {
typeof(DevExpress.XtraReports.CustomControls.RoundBordersControls.XRRoundLabel) };
}

function onCustomizeToolbox(s,e){
var info = e.ControlsFactory.getControlInfo("DevExpress.XtraReports.CustomControls.RoundBordersControls.XRRoundLabel");
var labelInfo = e.ControlsFactory.getControlInfo("XRLabel");
info.displayName = "Rounded Label";
info.toolboxIndex = labelInfo.toolboxIndex - 1;
info.group = labelInfo.group;
}

啟動(dòng)應(yīng)用程序來(lái)查看更改：

如果將控件從工具欄拖到設(shè)計(jì)器圖面上，則該控件將按預(yù)期呈現(xiàn)(帶有圓角)：

當(dāng)我們的修改顯示在屏幕上時(shí)，切換到Print Preview模式后，將看到控件沒(méi)有作為圓角標(biāo)簽打印(它作為簡(jiǎn)單標(biāo)簽打印)。首先，這是因?yàn)閳?bào)表文檔是在服務(wù)器上生成的(呈現(xiàn)給RoundLabelBrick類(lèi)，而不是文檔生成引擎所知道的一個(gè)brick類(lèi))，RoundLabelBrick類(lèi)必須在內(nèi)部BrickFactory中注冊(cè)。相應(yīng)地，我們需要在Program.cs文件中調(diào)用EnsureCustomBrick方法：

DevExpress.XtraReports.CustomControls.RoundedCustomControl.EnsureCustomBrick();

注意：對(duì)于進(jìn)度條控件，BrickFactory注冊(cè)步驟可以忽略，因?yàn)樵摽丶腃reateBrick方法返回PanelBrick的實(shí)例，這是一個(gè)內(nèi)置的和已知的。

注冊(cè)技術(shù)與其他基于web的平臺(tái)基本相同，請(qǐng)注意傳遞自定義控件類(lèi)型數(shù)組的不同之處：

ASP.NET MVC

@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner1";
settings.CustomControlTypes.Add(typeof(DevExpress.XtraReports.CustomControls.RoundBordersControls.XRRoundLabel));
}).BindToUrl("TestReport").GetHtml()

ASP.NET Core

對(duì)于ASP.NET Core應(yīng)用程序，自定義控件類(lèi)型傳遞給在控制器中創(chuàng)建的設(shè)計(jì)器模型(使用實(shí)現(xiàn)IReportDesignerModelBuilder接口的模型構(gòu)建器)：

public class HomeController : Controller {
// ...
public IActionResult Designer(
[FromServices] IReportDesignerModelBuilder reportDesignerModelBuilder,
[FromQuery] string reportName) {

reportName = string.IsNullOrEmpty(reportName) ? "TestReport" : reportName;
var designerModel = reportDesignerModelBuilder
.Report(reportName)
.CustomControls(typeof(DevExpress.XtraReports.CustomControls.RoundBordersControls.XRRoundLabel))
.BuildModel();
return View(designerModel);
}
}

用于JavaScript框架(Angular、React、Vue)的DevExpress組件是基于aj ASP. NET Core服務(wù)器端應(yīng)用程序，這意味著不需要客戶(hù)端代碼。您必須向ASP. NET Core后端添加自定義控件類(lèi)型，如上面的代碼片段所示(并在客戶(hù)端應(yīng)用程序中包含工具欄圖標(biāo)的SVG模板)。

在這個(gè)特定的實(shí)例中，我們必須在所有示例項(xiàng)目的應(yīng)用程序啟動(dòng)時(shí)調(diào)用DevExpress.XtraReports.CustomControls.RoundedCustomControl.EnsureCustomBrick方法。

自定義表達(dá)式函數(shù)集成

要在web應(yīng)用程序中注冊(cè)自定義表達(dá)式函數(shù)，您需要在啟動(dòng)應(yīng)用程序時(shí)調(diào)用以下注冊(cè)方法當(dāng)中的一個(gè)。

注冊(cè)方法

范圍：僅報(bào)表組件

CustomFunctions. Register方法允許您在表達(dá)式綁定和計(jì)算字段中使用指定的自定義函數(shù)，自定義函數(shù)顯示在Reporting Expression Editor中的可用函數(shù)列表中。

DevExpress.XtraReports.Expressions.CustomFunctions.Register(new CustomFormatFunction());

范圍：所有DevExpress組件 - 數(shù)據(jù)源向?qū)А⒉樵?xún)生成器等

如果您希望自定義函數(shù)在數(shù)據(jù)源向?qū)Щ驊?yīng)用程序中的其他地方(在我們的報(bào)表組件之外)可用于SQL查詢(xún)，請(qǐng)實(shí)現(xiàn)ICustomFunctionOperatorFormattable接口并使用CriteriaOperator. RegisterCustomFunction方法注冊(cè)該函數(shù)。

更多DevExpress線上公開(kāi)課、中文教程資訊請(qǐng)上中文網(wǎng)獲取