獲取DevExpress v23.2正式版下載

DevExpress技術交流群9：909157416      歡迎一起進群討論

自定義控件集成

DevExpress Reports中的自定義報表控件注冊變得更加容易，為了滿足web開發人員的需求，DevExpressv23.1+包括簡化的自定義控件注冊支持(在服務器級別實現)。如果您的解決方案需要使用自定義報表控件，所需要做的就是將控件添加到服務器端報表設計模型中的自定義控件集合中，JavaScript函數、屬性和值將自動生成。

圓角標簽 - 多平臺的自定義控件

讓我們創建一個示例應用程序(適用于所有支持的Web平臺)，以幫助說明自定義報表控件注冊過程的靈活性。

下面的GitHub示例演示了自定義報表控件的創建/使用：

第一個例子是通用的：探索我們的實現來學習如何創建圓角的自定義報表控件——XRRoundLabel和XRRoundPanel。按照以下步驟在web應用程序中注冊XRRoundLabel控件。

1. 從下載該項目。

2. 打開Blazor示例解決方案，并將DevExpress.XtraReports.CustomControls.RoundedControls項目添加到解決方案中，在Blazor樣例項目中引用該項目。

3. 重新構建解決方案。

4. 將XRRoundControl類型添加到自定義控件的報表設計器集合中：

@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) };
}

最后，啟動應用程序。您將看到自定義控件出現在工具欄中(帶有默認的問號圖標)：

圖標、工具提示和工具欄位置 - 客戶端配置

要更改默認圖標，請添加一個SVG模板，其名稱與自定義控件的完全限定類型名稱相匹配：

<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>

要更改工具提示并指定工具欄中的位置，請按如下方式處理客戶端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;
}

啟動應用程序來查看更改：

如果將控件從工具欄拖到設計器圖面上，則該控件將按預期呈現(帶有圓角)：

當我們的修改顯示在屏幕上時，切換到Print Preview模式后，將看到控件沒有作為圓角標簽打印(它作為簡單標簽打印)。首先，這是因為報表文檔是在服務器上生成的(呈現給RoundLabelBrick類，而不是文檔生成引擎所知道的一個brick類)，RoundLabelBrick類必須在內部BrickFactory中注冊。相應地，我們需要在Program.cs文件中調用EnsureCustomBrick方法：

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

注意：對于進度條控件，BrickFactory注冊步驟可以忽略，因為該控件的CreateBrick方法返回PanelBrick的實例，這是一個內置的和已知的。

注冊技術與其他基于web的平臺基本相同，請注意傳遞自定義控件類型數組的不同之處：

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

對于ASP.NET Core應用程序，自定義控件類型傳遞給在控制器中創建的設計器模型(使用實現IReportDesignerModelBuilder接口的模型構建器)：

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服務器端應用程序，這意味著不需要客戶端代碼。您必須向ASP. NET Core后端添加自定義控件類型，如上面的代碼片段所示(并在客戶端應用程序中包含工具欄圖標的SVG模板)。

在這個特定的實例中，我們必須在所有示例項目的應用程序啟動時調用DevExpress.XtraReports.CustomControls.RoundedCustomControl.EnsureCustomBrick方法。

自定義表達式函數集成

要在web應用程序中注冊自定義表達式函數，您需要在啟動應用程序時調用以下注冊方法當中的一個。

注冊方法

范圍：僅報表組件

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

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

范圍：所有DevExpress組件 - 數據源向導、查詢生成器等

如果您希望自定義函數在數據源向導或應用程序中的其他地方(在我們的報表組件之外)可用于SQL查詢，請實現ICustomFunctionOperatorFormattable接口并使用CriteriaOperator. RegisterCustomFunction方法注冊該函數。

更多DevExpress線上公開課、中文教程資訊請上中文網獲取