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.
#Prerequisites
Start with an existing Web Reporting application or create a new application as described in the following help topics:
- Add a Report Designer to an ASP.NET Web Forms Application
- Use DevExpress Visual Studio Templates to Create an ASP.NET Web Forms Reporting App with a Report Designer
#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;
}