【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
　

.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）に編集ボタン列を追加したものだが、簡略化のために［編集］ボタン以外の実装は行っていない。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    void BindMyGrid() {
      DataSet ds = new DataSet();
      ds.ReadXml("http://www.atmarkit.co.jp/rss/fdotnet/rss2dc.xml");

      MyGrid.DataSource = ds.Tables["item"];
      MyGrid.DataBind();
    }

    void Page_Load(object sender, EventArgs e) {
      if (!IsPostBack) {
        BindMyGrid();
      }
    }

    void MyGrid_Edit(object sender, DataGridCommandEventArgs e) {
      MyGrid.EditItemIndex = e.Item.ItemIndex;
      BindMyGrid();

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

      tb1.Width = Unit.Percentage(100);
      tb2.Width = Unit.Percentage(100);
      tb2.TextMode = TextBoxMode.MultiLine;
    }

  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        OnEditCommand ="MyGrid_Edit"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#BB2255" ForeColor="white" />
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:BoundColumn
            DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
            DataField="description" HeaderText="概要" />

        <asp:EditCommandColumn
            EditText  ="編集"
            CancelText="中止"
            UpdateText="更新"
            ButtonType="PushButton"
            HeaderText="編集用ボタン" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
TextBoxコントロールのサイズを変更するC#のサンプル・プログラム（wideedit.aspx）

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

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

「.NET TIPS」

ホワイトペーパー（TechTargetジャパン）

Insider.NET フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

- PR -
＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

- PR -

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ