ActiveReports for .NET 18.0J
Blazor WebデザイナのAPI
ActiveReportsユーザーガイド > レポートの表示 > Blazorデザイナの使用 > Blazor WebデザイナのAPI

ActiveReportsは、Blazor WebデザイナコンポーネントをWebアプリケーションに統合するための豊富なAPIを提供します。プロジェクトにBlazor Webデザイナコンポーネントを埋め込むには、Blazor WebDesignerのAPIを使用します。APIを使用することで、レポートを作成、設計、および保存でき、デザイナのロケールの定義、レポートアイテムのデフォルト設定のカスタマイズ、データタブとプロパティタブの管理、アプリケーション情報の変更などの追加機能を使用できます。

GlobalDesignerAPI

GrapeCity.ActiveReports.Blazor.DesignerライブラリによってエクスポートされるGrapeCity.ActiveReports.Blazor.Designer.ReportDesignerオブジェクトの型。

ReportDesigner

ReportDesignerコンポーネントを<div>要素に描画します。「*.razor」ページには次のようなコードを使用します。

パラメータ(型)

PreviewSettings: PreviewSettings        

戻り値:ユーザーインタフェイスのReportDesignerコンポーネントを描画します。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

AppBarSettings

Blazor Webデザイナでメニューバーの設定を取得または設定します。

パラメータ(型):

AppBarSettings: AppBarSettings

戻り値:メニューバーの設定を含むAppBarSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner AppBarSettings="@_appBar" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private AppBarSettings _appBar = new AppBarSettings
    {
        OpenButton = new OpenButton { Visible = true },
        AboutButton = new AboutButton { Visible = false },
        ContextActionsTab = new ContextActionsTab { Visible = true },
        HomeTab = new HomeTab { Visible = true },
        InsertTab = new InsertTab { Visible = false },
        ParametersTab = new ParametersTab { Visible = true },
        SaveAsButton = new SaveAsButton { Visible = false },
        SaveButton = new SaveButton { Visible = false },
        ScriptTab = new ScriptTab { Visible = false },
        Visible = false
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

App

アプリケーションに関連するAPIを取得します。

パラメータ(型)

App: GrapeCity.ActiveReports.Blazor.Designer.App

戻り値:アプリケーションに関連するAPIを返します。

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        GrapeCity.ActiveReports.Blazor.Designer.App api = _designer.App;
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

DataSettings

レポートデザイナコンポーネントのデータ設定を設定します。

パラメータ(型):

DataSettings: DataSettings

戻り値:データの設定を含むDataSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DataSettings="@_dataSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DataSettings _dataSettings = new DataSettings
    {
        DataSets = new DataSets { CanModify = true },
        DataSources = new DataSources { CanModify = true },
        DataSources = new DataSources { CanModify = true, 
             Shared = new SharedDataSourceOptions()
             {
                Enabled = true
             }
        },
        DataTab = new DataTab { Visible = true },
        Parameters = new Parameters() { CanModify = true },
        CommonValues = new CommonValues() { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DesignerInitialized

デザイナを初期化する時に呼び出されるコールバックを取得または設定します。

パラメータ(型)

DesignerInitialized:Action

戻り値:デザイナを初期化する後に呼び出されるアクションを含むActionオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DesignerInitialized="@DesignerInitializedCallback" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private void DesignerInitializedCallback() { }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DisableFocusTimer

フォーカスタイマーを無効にします。デフォルトでは、フォーカスされた要素(ボタンなど)は、Tabキーが押された後、短時間だけ強調表示されます。この設定により、フォーカスされた要素が永続的に強調表示されます。

パラメータ(型)

DisableFocusTimer:Boolean

戻り値:項目のフォーカスの現在の状態。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableFocusTimer="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DisableSystemClipboard

システムクリップボードの使用を無効にします。

パラメータ(型)

DisableSystemClipboard:Boolean

戻り値:システムクリップボードの使用を無効にする現在の状態。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableSystemClipboard="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Document

指定されたドキュメントを開きます。

パラメータ(型)

Document: Document

戻り値:指定されたドキュメント。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private Document _doc = new Document()
    {
        Type = SupportedDocumentType.cpl,
        Id = "Example.rdlx"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Documents

ドキュメントに関するAPIを取得します。

パラメータ(型)

Documents: Documents

戻り値:ドキュメントに関するAPI

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private Document _doc = new Document
    {
        Id = "Example.rdlx",
        Type = SupportedDocumentType.cpl
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if(_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Documents api = _designer.Documents;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

DocumentsSettings

ドキュメントに関するAPIの設定を取得または設定します。

パラメータ(型)

DocumentsSettings:DocumentsSettings

戻り値:ドキュメントAPIに指定された設定。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="@_documentsSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DocumentsSettings _documentsSettings = new DocumentsSettings
    {
        FileView = new FileView { Visible = true },
        Handlers = new Handlers()
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
OnDocumentChanged handlerのサンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="_documentsSettings"/>
</div>
@code {
    private DocumentsSettings _documentsSettings;
    public Index()
    {
        _documentsSettings = new DocumentsSettings()
        {
            Handlers = new Handlers()
            {
                OnDocumentChanged = (options) =>
                {
                    ...
                }
            }
        };
    }
}

EditorSettings

エディタの設定を取得または設定します。

パラメータ(型)

EditorSettings:EditorSettings

戻り値:エディタの設定。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner EditorSettings="@_editorSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private EditorSettings _editorSettings = new EditorSettings
    {
        ShowGrid = true,
        SnapToGrid = true,
        SnapToGuides = true,
        Rulers = new Rulers(),
        GridSize = "0.5cm"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Fonts

コントロールに許可されるフォントのリストを取得または設定します。

パラメータ(型)

Fonts:Object[]

戻り値:コントロールに許可されるフォントのリスト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Fonts="@_fonts" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _fonts = new string[1] { "Arial" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Height

デザイナの高さを取得または設定します。

パラメータ(型)

Height:String

戻り値:デザイナの高さ。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Height="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

ImageMimeTypes

説明:コントロールでサポートされている画像のMIMEタイプのリストを指定します。

パラメータ(型)

ImageMimeTypes:String[]

戻り値:コントロールでサポートされている画像のMIMEタイプのリスト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ImageMimeTypes="@_imageMimeTypes" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _imageMimeTypes = new string[3] { "image/gif", "image/jpeg", "image/png" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Language

説明:デザイナに使用する言語を指定します。Blazor Webデザイナは次の言語で利用できます:en、ja、zh。

パラメータ(型)

Language:String

戻り値:指定された言語。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Language="ja-JP" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

LocalizationResources

特定のロケールのローカリゼーション リソースを取得または設定します。

パラメータ(型)

LocalizationResources:LocalizationResources[]

戻り値:カスタム ローカリゼーション リソースの配列を返します。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LocalizationResources="@_localizationResources" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private LocalizationResources[] _localizationResources =
    {
        new LocalizationResources()
        {
            Language = "en",
            Resources = "[ { \"ns\": \"common\", \"lng\": \"en\", \"resources\": { \"units\": { \"cm\": { \"textShortName\": \"CustomName_cm\", \"textFullName\": \"CustomName_Centimeters\" } } } } ]"
        }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

LockLayout

説明:レポートレイアウトとの対話を管理します。LockLayoutを有効にすると、既存のレポートアイテムの変更が可能です。新しいレポートアイテムを追加するや、既存のアイテムを削除するなどのレポートのレイアウトを変更することができません。

パラメータ(型)

LockLayout:Boolean

戻り値:LockLayoutの現在の状態。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LockLayout="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

MenuSettings

Blazor Webデザイナコンポーネントのメニューの設定を取得または設定します。

パラメータ(型)

MenuSettings:MenuSettings

戻り値:メニューの現在の設定。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner MenuSettings="@_menuSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private MenuSettings _menuSettings = new MenuSettings
    {
        DocumentExplorer = new DocumentExplorer { Visible = true },
        GroupEditor = new GroupEditor { Visible = true },
        LayerEditor = new LayerEditor { Visible = true },
        Logo = new Logo { Visible = true },
        ToolBox = new ToolBox { Visible = true },
        Visible = true
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Notifications

通知に関するAPIを取得します。

パラメータ(型)

Notifications:Notifications

戻り値:通知に関するAPI

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Notifications api = _designer.Notifications;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

PreviewSettings

プレビューに関する設定を取得または設定します。

パラメータ(型)

PreviewSettings:PreviewSettings

戻り値:プレビュー設定。

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = true,
             OpenViewer = OpenViewer
         };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

PropertyGridSettings

プロパティグリッドの設定を取得または設定します。

パラメータ(型):

PropertyGridSettings:PropertyGridSettings

戻り値:プロパティグリッドの現在の設定を表すPropertyGridSettings

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PropertyGridSettings="@_propertyGridSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private PropertyGridSettings _propertyGridSettings = new PropertyGridSettings
    {
        Mode = Mode.Advanced,
        Sort = Sort.categorized,
        PropertiesTab = new PropertiesTab { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

RdlxSettings

RDLXプラットフォーム固有の設定を取得または設定します。

パラメータ(型)

RdlxSettings: RdlxSettings

戻り値:現在のRDLXレポートの設定を表すRdlxSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RdlxSettings="@_rdlxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RdlxSettings _rdlxSettings = new RdlxSettings
    {
        Dashboard = new Dashboard { Enabled = true },
        Msl = new Msl { Enabled = true },
        ExpressionSyntax = ExpressionSyntax.rdl,
        InitTemplates = new InitTemplates(),
        ReportItemsFeatures = new RdlxReportItemsSettings(),
        ReportStyles = { },
        ToolBoxContent = new ToolBoxContent { Cpl = new[] { RdlxToolBoxItem.formattedtext } }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

RpxSettings

RPXプラットフォーム固有の設定を取得または設定します。これらの設定を行うには、RPXレポートが存在する必要があります。

パラメータ(型):

RpxSettings: RpxSettings

戻り値:現在のRPXレポートも設定を表すRpxSettingsオブジェクト。 

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RpxSettings="@_rpxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RpxSettings _rpxSettings = new RpxSettings
    {
        Enabled = true,
        InitTemplates = new InitTemplates()
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

ServerSettings

サーバーに関する設定を取得または設定します。

パラメータ(型):

ServerSettings: ServerSettings

戻り値:サーバーに関する現在の設定を表すServerSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ServerSettings="@_serverSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ServerSettings _serverSettings = new ServerSettings
    {
        OnBeforeRequest = delegate (RequestInit requestInit)
        {
            return requestInit;
        },
        Url = "http://localhost:5098/"
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StatusBarSettings

Webデザイナコンポーネントのステータスバーの設定を取得または設定します。

パラメータ(型):

StatusBarSettings: StatusBarSettings

戻り値:現在のステータスバーの設定を表すStatusBarSettings

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StatusBarSettings="@_statusBarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StatusBarSettings _statusBarSettings = new StatusBarSettings
    {
        GridSizeEditor = new GridSizeEditor { Visible = true },
        PropertiesModeButton = new PropertiesModeButton { Visible = true },
        RulersButton = new RulersButton { Visible = true },
        ToggleGridButton = new ToggleGridButton { Visible = true },
        ToggleUnitsButton = new ToggleUnitsButton { Visible = true },
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StoreUnsavedReport

レポートの保存を管理します。StoreUnsavedReportを有効にすると、ブラウザタブまたはブラウザ自体が誤って閉じられた場合、未保存レポートを復元します。

パラメータ(型):

StoreUnsavedReport: Bool

戻り値StoreUnsavedReportの現在の状態を表す値。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUnsavedReport="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StoreUserPreferences

ユーザー設定を管理します。StoreUserPreferencesを有効にすると、ユーザー設定はブラウザに保存されます。

パラメータ(型):

StoreUserPreferences: Bool

戻り値StoreUserPreferencesの現在の状態を表す値。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUserPreferences="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StylesSettings

セクションレポートのスタイル設定を取得または設定します。

パラメータ(型):

StylesSettings: StylesSettings

戻り値:セクションレポートの現在のスタイル設定を表すStylesSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StylesSettings="@_styleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StylesSettings _styleSettings = new StylesSettings
    {
        Stylesheet = new Stylesheet { CanModify = true },
        StylesTab = new StylesTab { Visible = true }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

TitleSettings

ドキュメントのタイトルの設定を取得または設定します。

パラメータ(型):

TitleSettings: TitleSettings

戻り値:現在のドキュメントのタイトル設定を表すTitleSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner TitleSettings="@_titleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private TitleSettings _titleSettings = new TitleSettings
    {
        Disabled = false
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

ToolBarSettings

ツールバーの設定を取得または設定します。

パラメータ(型):

ToolBarSettings: ToolBarSettings

戻り値:現在のツールバー設定を表すToolBarSettingsオブジェクト。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ToolBarSettings="@_toolbarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ToolBarSettings _toolbarSettings = new ToolBarSettings
    {
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

Units

デザイナで使用されるデフォルトの寸法の単位を指定します。使用可能な値は、Units.InおよびUnits.Cmです。

パラメータ(型):

Units: Units

戻り値:レポートデザイナのデフォルトの寸法単位の現在値。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Units="Units.Cm" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

Width

デザイナの幅を取得または設定します。

パラメータ(型):

Width: String

戻り値:デザイナの幅を返します。

サンプルコード
コードのコピー
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Width="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

OpenDocumentExplorer

エクスプローラパネルを管理します。BlazorデザイナのAPIからパネルを管理するには、「*.razor」ページではサンプルコードを使用します。

次の例では、BlazorデザイナのAPIを使用してレポートのエクスプローラパネルを呼び出しています。

完全なコードは次のようになります。

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="OpenDocumentExplorer">エクスプローラを開く</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void OpenDocumentExplorer()
    {
        await _designer.App.Panels.Menu.Open("document-explorer");
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

UndoLastOperation

アプリケーションのAPIのクリップボードと選択状態を管理します。アプリケーションAPIのクリップボードと選択状態を管理するには、「*.razor」ページではサンプルコードを使用します。

次の例では、カスタムボタンを使用してデザイナでの最後の操作を元に戻します。

完全なコードは次のようになります。

サンプルコード
コードのコピー
@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="UndoLastOperation">最後の操作を元に戻す</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void UndoLastOperation()
    {
        await _designer.App.Editor.Undo();
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}