.NET TIPS [ASP.NET]DataGridコントロールの編集用テキストボックスを大きくするには?デジタルアドバンテージ2003/11/07 |
![]() |
|
「TIPS:[ASP.NET]DataGridコントロールで編集を可能にするには?」の最後で記しているように、DataGridコントロールの既定の編集機能を使用する場合、編集時に表示されるテキストボックスは次の画面のようにかなり幅が狭い。そしてこれを変更する手段は標準では用意されていない。
![]() |
既定の編集機能を使用したDataGridコントロール |
[編集]ボタンをクリックすると項目がテキストボックスに置き換わるが、幅が狭く、これを変更する手段は標準では用意されていない。 |
本稿では、既定の編集機能を使用したまま、表示されるテキストボックスを大きくする方法について解説する。これにより上記の画面は次のようにすることが可能だ。
![]() |
TextBoxコントロールのサイズを変更したDataGridコントロール |
本稿で作成しているサンプル・プログラム(wideedit.aspx)の実行画面。テキストボックスの幅を100%にし、右側のテキストボックスについては複数行表示にしている。 |
編集時の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)に編集ボタン列を追加したものだが、簡略化のために[編集]ボタン以外の実装は行っていない。
|
|
TextBoxコントロールのサイズを変更するC#のサンプル・プログラム(wideedit.aspx) | |
ここでは既定の編集機能にこだわったが、DataGridコントロールにはテンプレート列を用いて、独自に定義した編集用コントロールを使用するための機能が用意されている。これについては「TIPS:[ASP.NET]DataGridコントロールの編集用テキストボックスをカスタマイズするには?」で解説している。
カテゴリ:Webフォーム 処理対象:DataGridコントロール 使用ライブラリ:DataGridコントロール 使用ライブラリ:Unit構造体(System.Web.UI.WebControls名前空間) 関連TIPS:[ASP.NET]DataGridコントロールで編集を可能にするには? 関連TIPS:[ASP.NET]DataGridコントロールですべての行にアクセスするには? 関連TIPS:[ASP.NET]DataGridコントロールの各セルにアクセスするには? 関連TIPS:[ASP.NET]DataGridコントロールで特定のカラムのみを表示するには? 関連TIPS:[ASP.NET]DataGridコントロールの編集用テキストボックスをカスタマイズするには? |
![]() |
「.NET TIPS」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |