ASP.NET Web Forms アプリ用の ReportViewer v15 のツールバーの話です。Width プロパティで指定する幅がツールバーのアイコンを一行で表示するのに十分でない場合、その幅に入りきらないアイコンはツールバーに表示されません。
上の画像は Width がデフォルトの 400px の場合ですが、ズーム、エクスポート、印刷、検索のアイコンが 400px の幅に入りきらず、表示されていません。（アプリは「チュートリアル : ローカル処理モードでの ReportViewer Web サーバー コントロールとデータベースのデータ ソースの使用法」のものです。本題とは関係ないことですがご参考まで）
それを以下の画像のように表示する方法を書きます。
ちなみに、v12 では以下の画像のように、何もしなくても全部のアイコンが表示されます。（なぜ、v15 でも同じにしなかったのかの理由は不明です。わざわざ手間をかけて非表示しているということは何かそうせざるを得ない事情があるのかもしれません・・・）
ならば、わざわざ v15 にアップグレードしなくても v12 を使えば良いと思うかもしれませんが、v12 は印刷に ActiveX を使っているので IE でしか印刷ができないという問題があります。ズームと印刷のアイコンは Chrome, Edge, Firefox などでは表示さえされません。また、IE11 でも問題があって、ドキュメントモードを 10 以下にしないと Height プロパティの設定が無視されます。
v15 ではそのあたりの問題が解消されており、ズームと印刷は Chrome, Edge, Firefox でも使用可能となっています。
なので、新規開発で ReportViewer を使うなら v15 の一択になると思いますが、上に述べたツールバーの問題を解決しないと、エクスポートや印刷のアイコンが現れず Excel にエクスポートできないとか印刷できないとかで使い難いと思います。
解決方法としては：
-
ReportViewer の Width プロパティの値を固定する場合、ツールバーに不要な項目は非表示にして、固定した幅に必要なアイコンが収まるようにする。
-
ReportViewer 幅がブラウザの表示幅一杯になるようにする。即ち、Width プロパティを 100% に設定し親要素の幅は設定しない。ブラウザの表示幅に応じてアイコンは表示されるので、この解決方法が一番��さそうです。
-
JavaScript を使って表示する。
・・・ということが考えられます。上の 1, 2 のやり方は説明するまでもないことですので、以下に 3 番目の方法だけを書きます。その結果がこの記事の上から 2 番目の画像です。
まず、なぜ表示されないかですが、Width で設定した幅からはみ出るアイコンが含まれる div 要素に ReportViewer が自動的に display: none を設定するからです。下の画像を見てください。
これを何とかする方法はないかと、以下の記事などを読んでみましたが、プロパティの設定なとで簡単に解決する方法はなさそうでした。
上の 3 番目の記事の JavaScript API を利用して操作することも考えましたが、display: none を display: inline-block に書き換えることはできるものの、スクロールバーを操作したりすると元の display: none に戻ってしまいます。
元の display: none に戻ってしまうというところは何ともできないので、ツールバーをクリックすると display: none を display: inline-block に書き換えられる手段を提供するのがよさそうです。
JavaScript で書き換えても、スクロールバーを操作すると ReportViewer が自動的に display: none に戻してしまいますが、その場合は再度ツールバーをクリックして再表示するということで対応してもらう他なさそうです。
そのサンプルコードは以下の通りです。コードの中の ToolBarButtonsCell というのはツールバーの div 要素に付与されているクラス名です。上の html ソースの画像を見てください。それをハードコーディングするのはちょっと抵抗がありますが、他に適当な手段が見つかりません。
<script src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
//<![CDATA[
// ツールバーに全項目を表示するための対応を考えたのが下記
window.onload = function () {
$("div.ToolBarButtonsCell").on('click', changecss);
};
function changecss() {
$("div.ToolBarButtonsCell > div").each(function () {
var display = $(this).css("display");
if (display == "none") {
$(this).css("display", "inline-block");
}
});
};
//]]>
</script>
上にも書きましたが、v12 では全部のアイコンが表示されていたのに、v15 でわざわざ手間をかけて非表示しているということは何かそうせざるを得ない事情があって、それを上のような方法で無理やり表示すると、予期せぬ好ましからざる副作用が出るかもしれません。今のところ問題には遭遇してませんが、それが気がかりです。
最後になりますが、ReportViewer v15 は Visual Studio には含まれておらず、ツールボックスにも表れてきません。自力で NuGet インストールして設定する必要がありますので注意してください。
インストールの方法などは Microsoft のドキュメント「レポート ビューアー コントロールを使用した Reporting Services の統合 - 概要」を見てください。