.NET TIPS ［ASP.NET］DataGridコントロールにスクロールバーを付けるには？ デジタルアドバンテージ 2004/01/16

　DataGridコントロールはテーブル形式でデータを一覧表示できるが、通常はデータ数や各項目のデータのサイズなどが固定でないため、データを表示するまでそれが画面上で占める大きさを特定できない。このため、テキストやほかのコントロールなどとともに使用する場合には、配置や画面デザインを決めにくい。

　このような場合には、次の画面のようにDataGridコントロールにスクロールバーを付けることにより、その表示領域を固定することができる。

スクロールバーの付いたDataGridコントロール

Visual Studio .NETでFlow Layout Panelコントロールを使用する

　DataGridコントロールにスクロールバーを付けるには、Visual Studio .NETを使用している場合、HTMLコントロールの1つとして用意されている「Flow Layout Panelコントロール」を利用すればよい。

　これにはまず、ツールボックスの［HTML］の項目からFlow Layout Panelコントロールをフォーム上に配置し、DataGridコントロールを表示したい大きさにサイズを調節する。次に、それが選択された状態でプロパティ・ウィンドウの［style］をクリックして選択し、これにより右隅に表示される［...］ボタンをクリックして［スタイル ビルダ］ダイアログを開く。

Flow Layout Panelコントロールを配置したフォーム

ツールボックスの［HTML］の項目にある［Flow Layout Panel］ 　 フォーム上に配置したFlow Layout Panelコントロール 　 Flow Layout Panelコントロールを選択し、プロパティ・ウィンドウから［style］の項目を選択して、表示される右隅の［...］ボタンをクリックすると、このコントロールの［スタイル ビルダ］ダイアログが表示される

　［スタイル ビルダ］ダイアログでは、左側のエリアから［レイアウト］を選択し、次の画面のように［オーバーフロー］で「必要に応じてスクロールバーを使用」を選択し、［OK］ボタンをクリックする。

Flow Layout Panelコントロールの［スタイル ビルダ］ダイアログ

［レイアウト］を選択する 　 ［オーバーフロー］で「必要に応じてスクロールバーを使用」を選択する

　そして、配置したFlow Layout Panelコントロールの内側にDataGridコントロールを配置する。このときDataGridコントロールの幅（Widthプロパティ）を100％に設定しておくと、実行時にDataGridコントロールがぴったり収まり、横スクロールバーなしで表示される（表示するデータ項目が折り返せない場合などはこの限りではない）。

DataGridコントロールを内部に配置したFlow Layout Panelコントロール

　以上の設定により、実行時にFlow Layout PanelコントロールよりもDataGridコントロールが大きくなる場合にはスクロールバーが表示されるようになる。

<div>要素のstyle属性でoverflowプロパティを設定

　Visual Studio .NETのデザイン画面でHTMLを表示させても分かるように、Flow Layout Panelコントロールは単なる<div>要素を出力するだけのものだ。DataGridコントロールのように、このコントロールに対応したクラスが存在するわけではない。

　aspxファイルでコードによりDataGridコントロールにスクロールバーを設定するには、次のようにして<asp:DataGrid>要素を<div>タグで囲めばよい。

  <div style="overflow:auto; width:600; height:400">
    <asp:DataGrid ……>
      ……
    </asp:DataGrid>
  </div>


　ここでのポイントはstyle属性で指定したoverflowプロパティだ。この値を「auto」に設定しておくことにより、必要に応じてスクロールバーが表示される。

カテゴリ：Webフォーム　処理対象：DataGridコントロール 使用ライブラリ：DataGridコントロール 使用ライブラリ：Flow Layout Panelコントロール

　

この記事と関連性の高い別の.NET TIPS ［ASP.NET］DataGridコントロールの編集用テキストボックスを大きくするには？ スクロールバー付きでPictureBoxコントロールに画像に表示するには？ DataGridコントロールで行の追加／削除およびデータ編集を禁止するには？ ［ASP.NET］DataGridコントロールでデータセットを表示するには？ DataGridコントロールでソートを禁止するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）