前提・実現したいこと
お世話になります。
GridViewのヘッダー部分を一部2段にする方法がわからずとん挫しています。
下記のようなヘッダーを一部2段にしてGridviewで表現することはできないのでしょうか。
※汚くて済みません
'---
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー|
| | ヘッダ B |
| ヘッダA |－－－－－－－－－－－－－－－－－－－－－－－－|
| | ヘッダC | ヘッダ D |
|＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝|
| ＩＤ |データ | データ |
|－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜|
| ＩＤ | データ | データ |
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー｜
ヘッダＡのとなりにヘッダＢ、そのＢの下にＣとＤがあるようなヘッダをつくりたい
ListViewなら実現できそうだという話もききますがいろいろすでにGridViewでつくってあるので
ここまできたらGridViewで実現したいと考えてます。
よろしくお願いいたします
RowCreatedでなんとかならないかの検討
if (e.Row.RowType == DataControlRowType.Header)
//ヘッダ行をつくって上にくっつけるイメージ
GridViewRow row1 = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);
//ここで2段になるヘッダをつくりたい
//グリッドに追加
GridView1.Controls[0].Controls.Add(row1);
}補足情報(言語/FW/ツール等のバージョンなど)
ドットネットフレームワーク４．５．２
C#
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
下記のようなヘッダーを一部2段にしてGridviewで表現することはできないのでしょうか。
ヘッダだけなら以下の記事にあるようなことをして可能です。（記事には、ヘッダ・列を固定するための質問者さんのやりたいこととは関係ないスタイルの設定も書いてありますが、そこは無視してください）
GridView のヘッダ、列を固定
http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx
記事を見ていただければ分かると思いますが、ヘッダを 2 段にするだけでもかなり大変です。このような苦労をしてまで GridView にこだわるより、ListView に切り替えた方が開発工数も保守工数も少なくてすむと思います。（特に保守工数。上の記事は自分で作った例ですが、何がどうなっているのか思い出すのが大変）
なお、データ行を 2 段にするの無理です。もし将来その可能性があるなら、GridView で何とかしようと考えるより、即 ListView を使う方向に進むことをお勧めします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/10/14 18:01 編集
いただいたサイトを参考にやってみると二段の表示はできました。
ただ、「text-align: center;」のCSSを両方にセットしているのですが
colspanで結合されたセルだけ中央よせになりません。
別の書き方が必要でしょうか？
ListViewのすすめありがとうございます。
正直なところ無駄なこだわりでGridviewを選択してるなぁという気は
私自身もしていますので別のものをつくるときには最初からListView
ありきでやりたいと思います。
が、今回は結構つくってしまったこともあるのでGridView統一で実行し、
Gridviewが何に向いてないのか、何が楽なのか体で目いっぱい学びたいと思います。
よろしくお願いできれば幸いです。
2016/10/14 18:14
2016/10/14 19:15
名前を変えたりが大変で今のコードからサンプルを出すのは厳しい側面もあります。
差支えない部分を切り出すしかないのですが
いただいたサンプルとの違いは
.text_center{
text-align: center;
}
というstyleをつくってあって
row1.CssClass = "text_center";
row2.CssClass = "text_center";
のようにしているぐらいなのですが
横に結合しているセルだけ(上の図でいうヘッダーB)が左寄になっているのです。
他は正常にセンタリングされているのですが・・・。
2016/10/14 19:37
「差支えない部分を切り出す」か、先に私が紹介した記事のコードをベースに話をすることはできませんか？ そうしないと何も具体的なことが分からず、話が進みません。
でも、自分としては、そういうことに時間を費やすより ListView を使うことに方向転換することをお勧めしますが。
2016/10/15 14:25
以下の画像（IE9 + F12 開発者ツール）を見てください。
http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f10%2fgridviewheader.jpg
私のサンプルの方では table 要素全体に text-align: center; を設定しているので、table の中の tr, th, td 全部に text-align: center; が適用されます。また、ヘッダのセルは th 要素になるので、仮に text-align: center; がなかったとしてもセンターになります。上の画像の F12 開発者ツールに表示された HTML とスタイルを見てください。
なので、質問者さんは私が提示したサンプルどおりにやってないと思います。質問者さんのコードと私のサンプルを良く見比べてください。
また、質問者さんの方でも F12 開発者ツールを使って、問題の部分が何の要素で、それにスタイルがどのように適用されているか調べてください。
今提供されている情報で自分がお手伝いできるのはここまでです。質問者さんの方がこれ以上情報を提供できないのであれば、この先は自助努力でお願いします。
2016/10/17 10:10
CSSが反映されていないことが原因でした。
丁寧にご教授くださりありがとうございました。