ReportViewer への柔軟なサイズ変更の追加

C1ReportViewer コントロールでは、柔軟なサイズ変更用に Width プロパティと Height プロパティをパーセンテージで指定できます。この例では、クライアントスクリプトを使用して親コンテナのサイズを変更します。 C1ReportViewer レイアウトは、親コンテナのサイズの変更に応じて調整されます。

以下の手順を実行します。

ソースビューで、次のように <cc1:C1ReportViewer> マークアップの前後にコンテナを追加します。

XAML	コードのコピー
<div id="parentContainerSample" > <cc1:C1ReportViewer runat="server" ID="C1ReportViewer1" Height="100%" Width="100%"> </cc1:C1ReportViewer> </div>

この親コンテナは実行時にサイズ変更されます。

以下のマークアップをライトボックスマークアップの直下に追加します。

XAML	コードのコピー
<p>親コンテナのサイズを変更する：</p> <ul> <li><a href="javascript:changeParentSize(320, 240);">親サイズを 320x240px に変更する</a>\n </li> <li><a href="javascript:changeParentSize(600, 400);">親サイズを 600x400px に変更する</a>\n </li> <li><a href="javascript:changeParentSize('100%', '475');">親サイズを 100% x 475px に変更する</a>\n </li> </ul>

XAML

コードのコピー

<p>親コンテナのサイズを変更する：</p>
<ul>
    <li><a href="javascript:changeParentSize(320, 240);">親サイズを 320x240px に変更する</a>\n
    </li>
    <li><a href="javascript:changeParentSize(600, 400);">親サイズを 600x400px に変更する</a>\n
    </li>
    <li><a href="javascript:changeParentSize('100%', '475');">親サイズを 100% x 475px に変更する</a>\n
    </li>
</ul>

これは、それぞれが親コンテナのサイズをさまざまな高さと幅に変更する３つのリンクを追加します。

以下のマークアップを前のマークアップの直下に追加します。

XAML	コードのコピー
<script language="javascript" type="text/javascript"> function changeParentSize(w, h) { $("#parentContainerSample").width(w).height(h); $("#<%=C1ReportViewer1.ClientID%>").c1reportviewer("refresh"); } </script>

XAML

コードのコピー

<script language="javascript" type="text/javascript">
    function changeParentSize(w, h) {
        $("#parentContainerSample").width(w).height(h);
        $("#<%=C1ReportViewer1.ClientID%>").c1reportviewer("refresh");
    }
</script>

このスクリプトはサイズ変更リンクを初期化します。

このトピックの作業結果

アプリケーションを実行し、実行時にリンクの１つをクリックして C1ReportViewer に含まれる親コンテナのサイズを変更します。 C1ReportViewer コントロールは、親コンテナと共にサイズ変更されることに注意してください。