ContextQMD
Back to Devexpress

ReportDesignerSettingsBase Class

corelibraries-devexpress-dot-xtrareports-dot-web-dot-reportdesigner.md

latest10.4 KB
Original Source

ReportDesignerSettingsBase Class

Contains settings for the Web Report Designer model.

Namespace : DevExpress.XtraReports.Web.ReportDesigner

Assembly : DevExpress.Data.v25.2.dll

NuGet Package : DevExpress.Data

Declaration

csharp
public class ReportDesignerSettingsBase :
    SerializableSettingsBase
vb
Public Class ReportDesignerSettingsBase
    Inherits SerializableSettingsBase

The following members return ReportDesignerSettingsBase objects:

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:

html
<%@ 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>
csharp
@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

razor
<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>
razor
<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:

cshtml
@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:

csharp
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:

html
<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>
typescript
'use client';
import ReportDesigner, { RequestOptions, DesignerModelSettings, PreviewSettings, DataSourceSettings, WizardSettings } from 'devexpress-reporting-react/dx-report-designer';
import { ExportSettings, ProgressBarSettings } from 'devexpress-reporting-react/dx-report-viewer';
// ...

function App() {
  return (
    <ReportDesigner reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
      <DesignerModelSettings allowMDI={true}>
        <DataSourceSettings allowAddDataSource={false} allowRemoveDataSource={false}/>
        <PreviewSettings>
          <ExportSettings useSameTab={false}/>
          <ProgressBarSettings position='TopRight'/>
        </PreviewSettings>
        <WizardSettings useFullscreenWizard={false} enableSqlDataSource={false}/>
      </DesignerModelSettings>
    </ReportDesigner>       
  )
}

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

See Also

ReportDesignerSettingsBase Members

DevExpress.XtraReports.Web.ReportDesigner Namespace