Skip to main content

DevExpress v25.1 Update — Your Feedback Matters

Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

  • 4 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 Web Forms - Create a Custom Report Control

#Prerequisites

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")]
    [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

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 an SVG icon for the NumericLabel control:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomReportControlSample {
    public partial class Designer : System.Web.UI.Page {

        private void Page_Load(object sender, System.EventArgs e) {
            ASPxReportDesigner1.CustomControlTypes.AddRange(new[] { typeof(MyControl), typeof(NumericLabel)});
        }
    }
}
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Designer.aspx.cs" Inherits="CustomReportControlSample.Designer" %>

<%@ Register Assembly="DevExpress.XtraReports.v24.2.Web.WebForms, Version=24.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraReports.Web" TagPrefix="dx" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <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>

    <dx:ASPxReportDesigner EnableRichTextEditor="False" ID="ASPxReportDesigner1" runat="server">
    </dx:ASPxReportDesigner>
</asp:Content>

#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, "<%= typeof(CustomReportControlSample.CustomLabel).ToString() %>",
            "<%= typeof(CustomReportControlSample.CustomLabel).AssemblyQualifiedName %>");
    var labelInfo = e.ControlsFactory.getControlInfo("XRLabel");
    labelInfo.isToolboxItem = false;
}
See Also