.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」に設定しておくことにより、必要に応じてスクロールバーが表示される。End of Article

カテゴリ:Webフォーム 処理対象:DataGridコントロール
使用ライブラリ:DataGridコントロール
使用ライブラリ:Flow Layout Panelコントロール
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]DataGridコントロールの編集用テキストボックスを大きくするには?
スクロールバー付きでPictureBoxコントロールに画像に表示するには?
DataGridコントロールで行の追加/削除およびデータ編集を禁止するには?
[ASP.NET]DataGridコントロールでデータセットを表示するには?
DataGridコントロールでソートを禁止するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH