- PR -

ASP.NETでdatagridのヘッダにボタンを追加する方法

1
投稿者投稿内容
kkk
常連さん
会議室デビュー日: 2004/09/17
投稿数: 33
投稿日時: 2005-06-29 14:02
ASP.NET(vb)にて、datagridを用い、一覧画面を作成しています。

要件として、ヘッダを２行にし、１行目にボタンを追加する必要があります。
ヘッダ複数行については、以下の@IT Tipsにて対応できました。
http://www.atmarkit.co.jp/fdotnet/dotnettips/095multiheader/multiheader.html

しかし、ボタン追加についてはうまくいきません。（というか、実装イメージがわきません）

上記の件に関連した情報がありましたら、情報のご提供よろしくお願いします。
しーく
会議室デビュー日: 2005/06/29
投稿数: 6
投稿日時: 2005-06-29 15:06
こんにちは しーく です。

「ヘッダ２行＆ボタン」の実装はいくつか方法があると思いますが、Tipsの方法にボタン機能を付け足すとすると次のような方法になると思います。
TableCellオブジェクトをDataGridの頭に付け足していますが、このTableCellの子コントロールとしてボタンを付け足してあげればいいと思います。

こんな感じで↓↓↓
TableCell cell = new TableCell();
cell.ColumnSpan = 2;
cell.Font.Size = 20;
Literal literal1 = new System.Web.UI.WebControls.Literal();
literal1.Text = "Insider.NETフォーラムの新着記事15本";
Button button1 = new Button();
button1.Text = "ぼたん";
button1.Click += new EventHandler(this.Button1_Click); // イベントハンドラを定義するならこんな感じで
cell.Controls.Add(literal1);
cell.Controls.Add(button1);
kkk
常連さん
会議室デビュー日: 2004/09/17
投稿数: 33
投稿日時: 2005-06-29 16:29
しーくさん

詳細なご回答に大変感謝しております、ありがとうございました。
ButtonはWebコントロールを使用して実装しており、そこで思ったようにイベントが動いてくれず調査中ですが、なんとかなりそうです。

関連する話で、ご意見伺いたいのですが、今回はTipsで類似サンプルを見つけ、この方式で突き進んでしましましたが、今思うと、GUI上に見えないボタンかつイベントが分かりづらいなど、保守上好ましくない気がしています。同様な機能を実装する案として、どのようなものがありますか？
Templateカラムを利用すれば、ヘッダの上記カスタマイズは可能でしょうか？

たびたび申し訳ありませんが、お返事お待ちしております。
しーく
会議室デビュー日: 2005/06/29
投稿数: 6
投稿日時: 2005-06-30 01:44
こんにちは、しーく です。

GUIで見れるようにTemplateColumnを使った場合、今回のようなレイアウトを記述するのは無理ではないかと思います。
テンプレート内に<tr><td>などのタグをうまく組み合わせることになると思いますが、以下の２点の振る舞いとの兼ね合いでテーブルのレイアウトが綺麗に整わないと思います。
1. <HeaderTemplate>は実行時に次のようにHTMLレンダリングされます。
<td>[<HeaderTemplate>内のHTML（およびHTMLに展開されたサーバーコントロール）]</td>

2. <ItemTemplate>は実行時に次のようにHTMLレンダリングされます。
<td>[<ItemTemplate>内のHTML（およびHTMLに展開されたサーバーコントロール）]</td>

それぞれのテンプレートが、頭に<td>、お尻に</td>をレンダリングするのがネックになるのではと…
kkk
常連さん
会議室デビュー日: 2004/09/17
投稿数: 33
投稿日時: 2005-06-30 12:53
しーく さん

ご回答ありがとうございました。
確かにTemplateColumnを使うと、レイアウトがきれいにそろえられませんでした。
いろいろとご指摘ありがとうございました。

ASP.NETでの画面デザインは、コントロールで既に用意されている範囲で可能な実装であれば大変楽で、開発効率は良いと感じますが、detagridのヘッダレイアウトの変更みたく、カスタマイズが必要となると、なかなか難しく、調査時間等の作業工数がかかりますね。（知識不足ということは否めませんが）
次期バージョンに期待。

Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2005-07-01 04:22
DataGridのようにHTMLの<table>...</table>タグがレンダリングされる
Dataコントロールを加工・整形するには、ランタイム時にダイナミック
に編集する必要があります。

デザインビューで事前に作成するには、<table>...</table>タグが
レンダリングされない、Repeaterを使う手もあります。

私は、複雑な表を作成するときはDataGridの代わりに
Repeaterを愛用しています。
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
1

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