【2/17】今年は「濃厚」技術トーク！＠ITメールセミナー        

.NET TIPS ［ASP.NET］DataGridコントロールの編集用テキストボックスを大きくするには？ デジタルアドバンテージ 2003/11/07

　「TIPS：［ASP.NET］DataGridコントロールで編集を可能にするには？」の最後で記しているように、DataGridコントロールの既定の編集機能を使用する場合、編集時に表示されるテキストボックスは次の画面のようにかなり幅が狭い。そしてこれを変更する手段は標準では用意されていない。

既定の編集機能を使用したDataGridコントロール

［編集］ボタンをクリックすると項目がテキストボックスに置き換わるが、幅が狭く、これを変更する手段は標準では用意されていない。

　本稿では、既定の編集機能を使用したまま、表示されるテキストボックスを大きくする方法について解説する。これにより上記の画面は次のようにすることが可能だ。

TextBoxコントロールのサイズを変更したDataGridコントロール

本稿で作成しているサンプル・プログラム（wideedit.aspx）の実行画面。テキストボックスの幅を100％にし、右側のテキストボックスについては複数行表示にしている。

wideedit.aspxの実行（www.iwebmethod.netのページ）

編集時のTextBoxコントロールへのアクセス

　DataGridコントロールでは、EditItemIndexプロパティに行のインデックス番号を指定して、その行を編集対象とすることができる。この状態でデータ連結を行うと、<asp:BoundColumn>要素で定義した連結列などの項目はTextBoxコントロールに自動的に置き換わる。このため、データ連結が完了した後に、自動生成されたTextBoxコントロールにアクセスし、そのプロパティを操作すればTextBoxコントロールのサイズなどを変更することができる。

　データ連結後、行に含まれるオブジェクトにアクセスするには「TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？」で示したItemDataBoundイベントを利用する方法もあるが、ここでは「TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？」で示したような、DataBindメソッドを呼び出した直後に行にアクセスする方法を取ってみる。

　さて、実際にTextBoxコントロールが生成されるのは、［編集］ボタンがクリックされたときに呼び出されるイベント・ハンドラでデータ連結を行った場合だ。「TIPS：［ASP.NET］DataGridコントロールで編集を可能にするには？」でも解説しているように、たいていの場合このメソッドは次のような内容になる。

void MyGrid_Edit(object sender, DataGridCommandEventArgs e) {
  MyGrid.EditItemIndex = e.Item.ItemIndex;
  MyGrid.DataSource = ……
  MyGrid.DataBind();
}


　最後のDataBindメソッドを呼び出した後には、DataGridオブジェクトにはTextBoxコントロールが含まれているはずである。そしてそれが含まれる行のインデックス番号も「e.Item.ItemIndex」により取得できている。よって、このメソッドの最後に次のようなコードを追加すればTextBoxコントロールへの参照が得られる。なお、この例では1列目にTextBoxコントロールが表示されていると仮定している。

DataGridItem line = MyGrid.Items[e.Item.ItemIndex];
TextBox tb = (TextBox)line.Cells[0].Controls[0];


　ここで、編集している行を示す変数lineに代入しているDataGridItemオブジェクトがe.Itemではないことに注意が必要だ。DataBindメソッドの呼び出し後では、e.Itemが示している行はもはやDataGridオブジェクトからは参照されていない。

　TextBoxオブジェクトが取得できれば、あとはそのプロパティを変更するだけだ。例えばコントロールの幅はWidthプロパティで変更可能だ。

tb.Width = Unit.Percentage(100);

　ただし、タグでの記述時には属性として文字列で指定できたコントロールのプロパティも、実際には特定の型を持っていることが多い。このWidthプロパティはUnit型であるため、その値の設定にはこのようにUnit構造体（System.Web.UI.WebControls名前空間）の値が必要だ。

TextBoxコントロールのサイズを変更するサンプル・プログラム

　すでに実行画面を示している、TextBoxコントロールのサイズを変更するサンプル・プログラムのソース・コードは次のようになる。このプログラムは「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」で示しているサンプル・プログラム（bounddg2.aspx）に編集ボタン列を追加したものだが、簡略化のために［編集］ボタン以外の実装は行っていない。

　ここでは既定の編集機能にこだわったが、DataGridコントロールにはテンプレート列を用いて、独自に定義した編集用コントロールを使用するための機能が用意されている。これについては「TIPS：［ASP.NET］DataGridコントロールの編集用テキストボックスをカスタマイズするには？」で解説している。

この記事と関連性の高い別の.NET TIPS ［ASP.NET］DataGridコントロールの編集用テキストボックスをカスタマイズするには？ ［ASP.NET］DataGridコントロールで編集を可能にするには？ ［ASP.NET］DataGridコントロールのフッターに入力機能を追加するには？ DataGridコントロールで行の追加／削除およびデータ編集を禁止するには？ ［ASP.NET］DataGridコントロール内のドロップダウンリストに動的に項目を追加するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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

RSSフィード