ReportWizardTemplate.ImageClassName Property

Specifies the CSS class of the report template thumbnail.

Namespace: DevExpress.XtraReports.Web.ReportDesigner.DataContracts

Assembly: DevExpress.XtraReports.v23.2.Web.dll

NuGet Package: DevExpress.Web.Reporting.Common

Declaration

C#

[DataMember(Name = "imageClassName")]
public string ImageClassName { get; set; }

VB.NET

<DataMember(Name:="imageClassName")>
Public Property ImageClassName As String

Property Value

Type	Description
String	The CSS class name.

Remarks

View Example: Reporting for Web (ASP.NET MVC, ASP.NET Core and Angular) - How to Use the Report Wizard Customization API and Hide Data Source Actions in Report Designer

Do the following to specify a thumbnail for the report template in the Report Wizard:

1. Create an image file (InstantReportCheck.png - 96x96 pixels).

2. Create a CSS file (reportWizardCustomization.css) with the image class:

   reportWizardCustomization.css

   .instant-report-image {
       background-image: url('InstantReportCheck.png');
       background-repeat: no-repeat;
       background-position: center;
       background-size: 70px 96px;
   }
   

3. Link the reportWizardCustomization.css file to the page:

   CSHTML

   ...
   <link href="~/reportWizardCustomization.css" rel="stylesheet" />
   

4. Assign the instant-report-image CSS class name to the ImageClassName property of the current template:

   C#

   public override void CustomizeReportTypeList(ReportWizardTemplateCollection predefinedTypes) {
       predefinedTypes.Remove(predefinedTypes.Where(x => x.ID == nameof(ReportType.CrossTab)).First());
       predefinedTypes.Add(new DevExpress.XtraReports.Web.ReportDesigner.DataContracts.ReportWizardTemplate() {
           CanInstantlyFinish = true,
           ID = nameof(CustomReportType.InstantReport),
           Text = "Instant Report",
           ImageTemplateName = "instant-report"
       });
       predefinedTypes.Add(new DevExpress.XtraReports.Web.ReportDesigner.DataContracts.ReportWizardTemplate() {
           CanInstantlyFinish = true,
           ID = nameof(CustomReportType.InstantReport),
           Text = "Instant Report",
           ImageClassName = "instant-report-image"
       });
       predefinedTypes.Add(new DevExpress.XtraReports.Web.ReportDesigner.DataContracts.ReportWizardTemplate() {
           ID = nameof(CustomReportType.CustomLabelReport),
           Text = "Custom Label Report",
           ImageTemplateName = "dxrd-svg-wizard-LabelReport"
       });
   }
   

5. The result is shown in the following image:

   

   Note

   This method does not apply color schemes to icons automatically.