Create and Register a Custom Control in the Report Designer Toolbox (Blazor)
- 5 minutes to read
This topic explains how to create a custom report control inherited from the XRLabel control and register the control in the End-User Report Designer Toolbox.
Create a Custom Control
Add a new class that inherits from the XRLabel class and declare its properties with relevant attributes. Override the PutStateToBrick method to specify how to display a control in the preview. In this example, a value is assigned to the VisualBrick.Text property:
using DevExpress.Utils.Serializing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;
using System.ComponentModel;
public class NumericLabel : XRLabel
{
[Browsable(true), Bindable(false), Category("Data")]
[XtraSerializableProperty]
[DefaultValue("")]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible),
EditorBrowsable(EditorBrowsableState.Always)]
public int Number { get; set; }
// Render the control in the Designer's Preview and in the document.
protected override void PutStateToBrick(VisualBrick brick, PrintingSystemBase ps)
{
base.PutStateToBrick(brick, ps);
brick.Text = this.Number.ToString();
}
}
Limitations
The Visual Studio Report Designer does not display a custom control in the Toolbox by default. To show a custom control in the Toolbox, add the ToolboxItem attribute and set it to
true. Then, rebuild the project.Reporting for Web does not support custom XRTableRow and XRTableCell control implementations in a custom XRTable control.
Register a Custom Control in the Web End-User Report Designer
DxReportDesigner Component
To add a custom control to the Report Designer toolbox, register the custom control type using the DxReportDesigner.CustomControlTypes property.
The default icon for a custom control is the question mark. To specify a custom icon, add a style template with a name that is based on the name of the custom control’s class and uses the following pattern:
.dxrd-image-<namespace in lowercase>_<class name in lowercase>
The following code snippet registers the MyControl and NumericLabel custom control types:
@page "/designercustomcontrols"
<h1>End-User Report Designer - Custom Controls</h1>
<ul>
<li>Custom report control `MyControl` added to the toolbox</li>
<li>Custom report control `NumericLabel` added to the toolbox</li>
</ul>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%" CustomControlTypes="@customTypes">
</DxReportDesigner>
@code {
List<Type> customTypes = new List<Type> { typeof(MyControl), typeof(NumericLabel) };
}
The following code snippet defines an SVG icon for the NumericLabel control. Add it in the index.html or App.razor file, depending on your application type:
<script type="text/html" id="dxrd-svg-toolbox-numericlabel">
<svg viewBox="-2 -4 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_1" transform="translate(-2, -4)" style="enable-background:new 0 0 32 32">
<g id="Window">
<path d="M30, 10L30, 5C30, 4.5 29.5, 4 29, 4L3, 4C2.5, 4 2, 4.5 2, 5L2, 10L30, 10z" fill="#1177D7" class="Blue" />
</g>
</g>
<g id="Layer_1" transform="translate(-2, -4.00000095367432)" style="enable-background:new 0 0 32 32">
<g id="Window">
<path d="M28, 10L28, 26L4, 26L4, 10L2, 10L2, 27C2, 27.5 2.5, 28 3, 28L29, 28C29.5, 28 30, 27.5 30, 27L30, 10L28, 10z" fill="#727272" class="Black" />
</g>
</g>
</svg>
</script>
DxWasmReportDesigner Component
To add a custom control to the Report Designer toolbox, register the custom control type using the .IReportDesignerModelBuilder.CustomControls method.
The default icon for a custom control is the question mark. To specify a custom icon, add a style template with a name that is based on the name of the custom control’s class and uses the following pattern:
.dxrd-image-<namespace in lowercase>_<class name in lowercase>
The following code snippet registers the MyControl and NumericLabel custom control types:
using DevExpress.AspNetCore.Reporting.QueryBuilder;
using DevExpress.AspNetCore.Reporting.QueryBuilder.Native.Services;
using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;
using DevExpress.XtraReports.Web.ReportDesigner;
using DevExpress.XtraReports.Web.ReportDesigner.Services;
using Microsoft.AspNetCore.Mvc;
public class CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService)
: WebDocumentViewerController(controllerService);
public class CustomReportDesignerController(IReportDesignerMvcControllerService controllerService)
: ReportDesignerController(controllerService){
[HttpPost("[action]")]
public async Task<object> GetReportDesignerModel(
[FromForm] string reportUrl,
[FromForm] ReportDesignerSettingsBase designerModelSettings,
[FromServices] IReportDesignerClientSideModelGenerator designerClientSideModelGenerator,
[FromServices] IReportDesignerModelBuilder modelBuilder) {
var model = modelBuilder
.Report(string.IsNullOrEmpty(reportUrl) ? "Report" : reportUrl)
.CustomControls(typeof(MyControl), typeof(NumericLabel))
.BuildModel();
model.Assign(designerModelSettings);
var modelJsonScript = designerClientSideModelGenerator.GetJsonModelScript(model);
return Content(modelJsonScript, "application/json");
}
}
public class CustomQueryBuilderController(IQueryBuilderMvcControllerService controllerService)
: QueryBuilderController(controllerService);
The following code snippet defines an SVG icon for the NumericLabel control. Add it in the _Host.cshtml or App.razor file, depending on your application type:
<script type="text/html" id="dxrd-svg-toolbox-numericlabel">
<svg viewBox="-2 -4 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_1" transform="translate(-2, -4)" style="enable-background:new 0 0 32 32">
<g id="Window">
<path d="M30, 10L30, 5C30, 4.5 29.5, 4 29, 4L3, 4C2.5, 4 2, 4.5 2, 5L2, 10L30, 10z" fill="#1177D7" class="Blue" />
</g>
</g>
<g id="Layer_1" transform="translate(-2, -4.00000095367432)" style="enable-background:new 0 0 32 32">
<g id="Window">
<path d="M28, 10L28, 26L4, 26L4, 10L2, 10L2, 27C2, 27.5 2.5, 28 3, 28L29, 28C29.5, 28 30, 27.5 30, 27L30, 10L28, 10z" fill="#727272" class="Black" />
</g>
</g>
</svg>
</script>
Remove an Existing Control from the Toolbox
You can use the CustomizeToolbox event to remove an existing control from the toolbox. Call the getControlInfo method of the event argument’s ControlsFactory property to obtain the specified control and set the IElementMetadata.isToolboxItem property to false:
window.DesignerCustomization = {
onCustomizeToolbox: function(s, e) {
// Hides the XRLabel control in the Toolbox.
var info = e.ControlsFactory.getControlInfo("XRLabel");
info.isToolboxItem = false;
}
}