ReportDesignerSettingsBase Class

Contains settings for the Web Report Designer model.

Namespace: DevExpress.XtraReports.Web.ReportDesigner

Assembly: DevExpress.Data.v23.2.dll

NuGet Package: DevExpress.Data

Declaration

C#

public class ReportDesignerSettingsBase :
    SerializableSettingsBase

VB.NET

Public Class ReportDesignerSettingsBase
    Inherits SerializableSettingsBase

Related API Members

The following members return ReportDesignerSettingsBase objects:

• ReportDesignerModelSettings.DesignerModelSettings

Remarks

The ReportDesignerSettingsBase object allows you to configure the Web End-User Report Designer control. The settings are specified on the client, passed to the server and applied to the report designer model. When a page is rendered, the Web End-User Report Designer control requests the model from the server.

ASP.NET Web Forms & MVC

In ASP.NET Web Forms & MVC applications you can specify settings as follows:

ASP.NET Web Forms

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

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <dx:ASPxReportDesigner EnableRichTextEditor="False" AllowMDI="true" ID="ASPxReportDesigner1" runat="server">
    <SettingsDataSource AllowRemoveDataSource="false" AllowAddDataSource="false" />
        <SettingsReportPreview SettingsExport-UseSameTab="false" SettingsProgressBar-Position="TopRight" />
        <SettingsWizard UseFullscreenWizard="false" EnableSqlDataSource="false" />
    </dx:ASPxReportDesigner>
</asp:Content>

ASP.NET MVC

@using DevExpress.XtraReports.Web.WebDocumentViewer
@model ReportDesignerModel

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.AllowMDI = true;
    settings.SettingsDataSource.AllowRemoveDataSource = false;
    settings.SettingsDataSource.AllowAddDataSource = false;
    settings.SettingsReportPreview.SettingsExport.UseSameTab = false;
    settings.SettingsReportPreview.SettingsProgressBar.Position = ProgressBarPosition.TopRight;
    settings.SettingsWizard.UseFullscreenWizard = false;
    settings.SettingsWizard.EnableSqlDataSource = false;
    // Add the created data source to the list of default data sources.
    foreach (var dataSourceItem in Model.DataSources)
        settings.DataSources.Add(dataSourceItem.Key, dataSourceItem.Value);
}).BindToUrl("TestReport").GetHtml()

Blazor

Blazor Server

<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%" AllowMDI="true">
    <DxReportDesignerReportPreviewSettings ExportSettings="new(){UseSameTab=false}"
                                           ProgressBarSettings="new(){Position= DevExpress.XtraReports.Web.WebDocumentViewer.ProgressBarPosition.TopRight}">
    </DxReportDesignerReportPreviewSettings>
    <DxReportDesignerWizardSettings UseFullscreenWizard="false" EnableSqlDataSource="false" />
    <DxReportDesignerDataSourceSettings AllowAddDataSource="false" />
</DxReportDesigner> 

Blazor Web Assembly

<DxWasmReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%">
    <DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
    </DxWasmReportDesignerRequestOptions>
    <DxReportDesignerModelSettings AllowMDI="false">
        <DxReportDesignerDataSourceSettings AllowRemoveDataSource=false AllowAddDataSource=false>
        </DxReportDesignerDataSourceSettings>
        <DxReportDesignerReportPreviewSettings ExportSettings="new(){UseSameTab=false}"
                                               ProgressBarSettings="new(){Position= DevExpress.XtraReports.Web.WebDocumentViewer.ProgressBarPosition.TopRight}">
        </DxReportDesignerReportPreviewSettings>
        <DxReportDesignerWizardSettings UseFullscreenWizard=false EnableSqlDataSource=false />
    </DxReportDesignerModelSettings>
</DxWasmReportDesigner>

ASP.NET Core

The following code specifies the designer model properties and binds the Report Designer to the designer model:

ASP.NET Core

@using DevExpress.XtraReports.Web.WebDocumentViewer;
@model ReportDesignerCustomModel

@{
    var m = Model.ReportDesignerModel;
    m.AllowMDI = true;
    m.DataSourceSettings.AllowRemoveDataSource = false;
    m.DataSourceSettings.AllowAddDataSource = false;
    m.ReportPreviewSettings.ExportSettings.UseSameTab = false;
    m.ReportPreviewSettings.ProgressBarSettings.Position = ProgressBarPosition.TopRight;
    m.WizardSettings.UseFullscreenWizard = false;
    m.WizardSettings.EnableSqlDataSource = false;


    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .Bind(Model.ReportDesignerModel);
    @designerRender.RenderHtml()
}

JavaScript Frameworks

You can specify the Report Designer settings on the client side and pass them to the controller action on the server. Add the code that assigns the settings to the model. The controller method returns the model to the client for rendering.

The following code is a custom controller for the Report Designer component. It processes settings passed from the client and assigns them to the model:

CustomReportDesignerController

using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
using DevExpress.XtraReports.Web.ReportDesigner;
using Microsoft.AspNetCore.Mvc
// ...
public class CustomReportDesignerController : ReportDesignerController {
    public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
    }
    [HttpPost("[action]")]
    public IActionResult GetDesignerModel(
        [FromForm] string reportUrl,
        [FromForm] ReportDesignerModel designerModelSettings,
        [FromServices] IReportDesignerClientSideModelGenerator modelGenerator) {
        var model = modelGenerator.GetModel(reportUrl, null, ReportDesignerController.DefaultUri, WebDocumentViewerController.DefaultUri, QueryBuilderController.DefaultUri);
        model.Assign(designerModelSettings);
        return DesignerModel(model);
    }
}

The following code specifies the Report Designer settings on the client:

Angular

<dx-report-designer [reportUrl]="reportUrl" height="700px">
    <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
    <dxrd-designer-model-settings [allowMDI]="true">
        <dxrd-datasource-settings [allowAddDataSource]="false" [allowRemoveDataSource]="false"></dxrd-datasource-settings>
        <dxrd-preview-settings>
            <dxrv-export-settings [useSameTab]="false"></dxrv-export-settings>
            <dxrv-progressbar-settings position="TopRight"></dxrv-progressbar-settings>
        </dxrd-preview-settings>
        <dxrd-wizard-settings [useFullscreenWizard]="false" [enableSqlDataSource]="false"></dxrd-wizard-settings>
    </dxrd-designer-model-settings>
</dx-report-designer>

React

import './App.css';
import { useEffect, useRef } from 'react';
import { DxReportDesigner } from 'devexpress-reporting/dx-reportdesigner';
import * as ko from 'knockout';

const ReportDesigner = () => {
  const reportUrl = ko.observable("TestReport");
  const designerRef = useRef();
  const requestOptions = {
    host: "https://localhost:54114/",
    getDesignerModelAction: "DXXRD/GetDesignerModel"
  };

  useEffect(() => {
    const model = {
      reportUrl: reportUrl,
      requestOptions: requestOptions,
      designerModelSettings: {
        reportPreviewSettings: {
            exportSettings: {
              useSameTab: false
            },
            progressBarSettings:{
              position: "TopRight"
            }
        },
        wizardSettings:{
          useFullscreenWizard: false,
          enableSqlDataSource: false
        },
        dataSourceSettings: {
          allowRemoveDataSource: false,
          allowAddDataSource: false
        }
      }
    }

    const designer = new DxReportDesigner(designerRef.current, model);
    designer.render(); 
    return () => designer.dispose();
  })
  return (<div ref={designerRef}></div>);
}

function App() {
  return (<div style={{ width: "100%", height: "1000px" }}>
      <ReportDesigner />
  </div>);
  }

export default App;

Vue

<template>
<div ref="designer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0" data-bind="dxReportDesigner: $data"></div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-reportdesigner";

export default {
name: "ReportDesignerComponent",
mounted() {
    var designerOptions = {
        reportUrl: ko.observable("TestReport"),
        requestOptions: {
        host: "https://localhost:54114/",
        getDesignerModelAction: "DXXRD/GetDesignerModel"
        },
        designerModelSettings: {
        reportPreviewSettings: {
            exportSettings: {
              useSameTab: false
            },
            progressBarSettings:{
              position: "TopRight"
            }
        },
        wizardSettings:{
          useFullscreenWizard: false,
          enableSqlDataSource: false
        },
        dataSourceSettings: {
          allowRemoveDataSource: false,
          allowAddDataSource: false
        }
      }
    };
    ko.applyBindings(designerOptions, this.$refs.designer);
},
beforeDestroy() {
    ko.cleanNode(this.$refs.designer);
}
};
</script>

Inheritance

Object

DevExpress.Utils.SerializableSettingsBase

ReportDesignerSettingsBase

ReportDesignerModel