GrapeCity ActiveReports for .NET 16.0J
WebViewerのカスタマイズ
ActiveReportsユーザーガイド > レポートの表示 > ASP.NET用のビューワの使用 > カスタマイズ化 > WebViewerのカスタマイズ

jQueryメソッドを使用して、WebViewerインタフェースをカスタマイズすることができます。WebViewerは、ページスクリプトにjQueryライブラリを追加します。このチュートリアルは、WebViewerのツールバーにボタンを追加し、クライアント側でPDFエクスポートの処理を実現する方法について紹介します。

チュートリアルを完了すると、次のレポートが作成されます。

カスタマイズされたWebViewerインタフェース

カスタマイズされたWebViewerインタフェース

WebアプリケーションにActiveReportsを追加する

  1. Visual Studioで、「ASP.NET Webアプリケーション（.NET Framework）」を作成します。
  2. GrapeCity.ActiveReports.Web.jaパッケージをインストールするには、［ツール］>［NuGet パッケージ マネージャー］>［ソリューションの Nuget パッケージの管理］メニュー コマンドの順に選択し、［参照］タブでパッケージを検索してインストールします。
  3. ［ソリューションエクスプローラー］で、プロジェクトを右クリックし、［追加］>［新しい項目］を選択します。
  4. Webフォームを選択し、［追加］をクリックします。
  5. 追加されたWebForm.aspxの［デザイン］タブに移動し、デザイナにWebViewerコントロールをドラッグ＆ドロップします。WebViewerコントロールのデフォルトのビューワはHTMLビューワです。
  6. ReportNameプロパティを設定し、WebViewerにレポートを追加します。
    メモ: HTMLViewerでセクションまたはページの任意のレポートを追加することができます。詳細は「WebViewerコントロールの使用」を参照してください。

WebアプリケーションにjQueryライブラリを追加する

WebForm.aspxファイルのソースビューで、以下のコードを追加します。

<head>の後に次のコードを貼り付けます
コードのコピー 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

WebViewerのビューモデルにアクセスする

HTML WebViewerは、UIに依存しないビューモデルを提供するMVVMパターンにより作成されます。コードでプロパティとメソッドを使用し、Viewerのビューモデルにアクセスし、カスタムUIと連結することができます。MVVMに対応するために、JavaScriptの標準のMVVMライブラリであるknockout.jsを使用することができます。Knockout.jsは、HTML内で宣言的に連結し、監視オブジェクトとコレクションを提供します。詳細は、「JavaScriptでHTMLビューワの操作」を参照してください。

ViewModelにアクセスするには次の手順を行います。

  1. WebForm.aspxファイルのソースビューで、<script>タグを追加します。
  2. 以下のJavascriptコードを追加し、UIがHTMLページに描画される際に発生する、WebViewerのLoadedイベントとドキュメントのOnloadイベントのイベント処理メソッドを作成します。
    .aspxソースにコードを貼り付けます
    コードのコピー 
    <script>
    function viewer_loaded()               
      {
      };
    function document_onload()
      {
      };
    </script>
    ...

    <body onload="document_onload()">
  3. viewer_loadedイベントのハンドラに以下のJavascriptコードを追加し、WebViewerのビューモデルにアクセスします。
    .aspxソースにコードを貼り付けます
    コードのコピー 
    function viewer_loaded() {
                var viewModel = GetWebViewer('WebViewer1');           
            };
  4. 以下のJavascriptコードをdocument_loadイベントのハンドラに追加し、WebViewerのLoadedイベントをクライント側のviewer_loadedイベントと連結します。
    .aspxソースにコードを貼り付けます
    コードのコピー
    function document_onload() {
                $('#WebViewer1').ready(viewer_loaded);
            };

WebViewerのツールバーにボタンを追加する

WebForm.aspxのソースビューファイルで、viewer_loadedイベントのハンドラに以下のJavascriptコードを追加し、WebViewerツールボックスにアクセスします。次に、ツールバーにカスタムボタン（エクスポートボタン）を追加して、PDFエクスポート機能を追加します。

.aspxソースにコードを貼り付けます
コードのコピー 
       
function viewer_loaded() {
            var viewModel = GetWebViewer('WebViewer1');
      
            var pdfExportButton = {
                key: '$pdfExportButtonKey',
                text: 'To PDF',
            iconCssClass: 'mdi mdi-file-pdf',
                enabled: true,
                action: function (item) {
                    console.log('PDF形式にエクスポートします。');
                },
                onUpdate: function (arg, item) {
                    console.log(ビューワが更新されました。');
                }
            };
      
            viewModel.toolbar.desktop.addItem(pdfExportButton);
        };

 

ソースビューのWebForm1.aspxの完全なコードは次のとおりです。

.aspxソースにコードを貼り付けます
コードのコピー 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>       
<%@ Register assembly="GrapeCity.ActiveReports.Web" namespace="GrapeCity.ActiveReports.Web" tagprefix="ActiveReportsWeb" %>
       
<!DOCTYPE html>       
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body onload="document_onload()">
    <form id="form1" runat="server">
        <div>
            <ActiveReportsWeb:WebViewer ID="WebViewer1" runat="server" height="466px" width="667px" ReportName="AllCustomers.rdlx">
            </ActiveReportsWeb:WebViewer>
        </div>
        
    </form>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js">
    </script>                                        
    <script> 
        function viewer_loaded() {
            var viewModel = GetWebViewer('WebViewer1'); 
       
            var pdfExportButton = {
                key: '$pdfExportButtonKey',
                text: 'PDFにエクスポート',
                iconCssClass: 'mdi mdi-file-pdf',
                enabled: true,
                action: function (item) {
                    console.log('PDF形式にエクスポートします。');
                },
                onUpdate: function (arg, item) {
                    console.log('ビューワが更新されました。');
                }
            };
       
            viewModel.toolbar.desktop.addItem(pdfExportButton);           
        };
        
        function document_onload() {
            $('#WebViewer1').ready(viewer_loaded);
        };
    </script>
</body>
</html>

 

既存のツールバーボタンを削除する

.aspxソースにコードを貼り付けます
コードのコピー 
function viewer_loaded() {
            var viewModel = GetWebViewer('WebViewer1'); 
            ...
            
            viewModel.toolbar.desktop.removeItem($newButtonKey); //(ボタンのキー)
        };

 

メモ:

 

 

Copyright © 2003 GrapeCity, Inc. All rights reserved.