獲取DevExpress v23.2正式版下載

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

自定義控件集成

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

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

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

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

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

1. 從下載該項目。

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

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

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

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

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

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

要更改默認(rèn)圖標(biāo)，請?zhí)砑右粋€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;
}

啟動應(yīng)用程序來查看更改：

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

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

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

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

注冊技術(shù)與其他基于web的平臺基本相同，請注意傳遞自定義控件類型數(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

對于ASP.NET Core應(yīng)用程序，自定義控件類型傳遞給在控制器中創(chuàng)建的設(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)用程序，這意味著不需要客戶端代碼。您必須向ASP. NET Core后端添加自定義控件類型，如上面的代碼片段所示(并在客戶端應(yīng)用程序中包含工具欄圖標(biāo)的SVG模板)。

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

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

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

注冊方法

范圍：僅報表組件

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

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

范圍：所有DevExpress組件 - 數(shù)據(jù)源向?qū)?、查詢生成器?/strong>

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

---

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

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：慧都網(wǎng)

上一篇：「Qt Widget中文示例指南」如何實現(xiàn)一個日歷？（三） 下一篇：「實戰(zhàn)應(yīng)用」如何用DHTMLX Gantt構(gòu)建類似JIRA式的項目路線圖（二）