Skip to main content

Create and Register a Custom Control in the Report Designer Toolbox (ASP.NET MVC)

  • 3 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 .

View Example: Reporting for ASP.NET MVC - Create a Custom Report Control)


Start with an existing Web Reporting application or create a new application as described in the following help topics:

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")]
    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();


  • The Visual Studio Report Designer does not display a custom control in the Toolbox.
  • 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

To add a custom control to the Report Designer toolbox, register custom control type using the 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, and specifies a SVG icon for the NumericLabel control:

@using Reporting_AspNetMvc_Create_Custom_Control

<script type="text/html" id="dxrd-svg-toolbox-numericlabel">
    <svg viewBox="-2 -4 32 32" xmlns="" xmlns: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 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" />

@Html.DevExpress().ReportDesigner(settings =>
    settings.Name = "ReportDesigner1";
    settings.CustomControlTypes.AddRange(new[] { typeof(MyControl), typeof(NumericLabel) });

Remove an Existing Control from the Toolbox

You can use the CustomizeToolbox event to remove an existing control from the Toolbox. Use the getControlInfo method of the event argument’s ASPxClientReportDesignerCustomizeToolboxEventArgs.ControlsFactory property to obtain the specified control and set the IElementMetadata.isToolboxItem property to false:

function onCustomizeToolbox(s, e) {
    customizeToolbox(s, e, '@shortTypeName', '@fullTypeName');
    // Hide the Text property in the NumericLabel control's Property panel.
    s.GetPropertyInfo('@shortTypeName', "Text").visible = false;
    // Hide the XRLabel control in the Toolbox.
    var info = e.ControlsFactory.getControlInfo("XRLabel");
    info.isToolboxItem = false;
See Also