xtrareports-113773-web-reporting-asp-net-webforms-reporting-end-user-report-designer-in-asp-net-web-forms-reporting-customization-register-a-custom-control-in-the-report-designer-toolbox.md
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
Start with an existing Web Reporting application or create a new application as described in the following help topics:
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();
}
}
using DevExpress.Utils.Serializing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.Localization;
using DevExpress.XtraReports;
using DevExpress.XtraReports.UI;
using System.ComponentModel;
using System.Drawing;
public enum MyEnum { One, Two, Three }
public class MyControl : XRLabel {
public static readonly SizeF InitSizeF = new SizeF(200, 50);
[XtraSerializableProperty,
DefaultValue(true),
Favorite(true),
SRCategory(ReportStringId.CatBehavior)]
public bool BoolProp { get; set; }
[XtraSerializableProperty,
DefaultValue(MyEnum.One)]
public MyEnum EnumProp { get; set; }
[XtraSerializableProperty]
public Item[] ArrayProp { get; set; }
protected override void PutStateToBrick(VisualBrick brick, PrintingSystemBase ps) {
base.PutStateToBrick(brick, ps);
brick.Text = EnumProp.ToString();
}
public class Item {
[XtraSerializableProperty]
public int PropA { get; set; }
}
}
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.
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)});
}
}
}
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace CustomReportControlSample
Public Partial Class Designer
Inherits Page
Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
ASPxReportDesigner1.CustomControlTypes.AddRange({GetType(MyControl), GetType(NumericLabel)})
End Sub
End Class
End Namespace
<%@ 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.13.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>
<%@ Page Language="VB" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Designer.aspx.vb" Inherits="CustomReportControlSample.Designer" %>
<%@ Register Assembly="DevExpress.XtraReports.v24.2.Web.WebForms, Version=24.2.13.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>
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