GridViewのヘッダー部分を一部2段にする方法

Question

###前提・実現したいこと
お世話になります。
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#

Answer 1

下記のようなヘッダーを一部2段にしてGridviewで表現することはできないのでしょうか。

ヘッダだけなら以下の記事にあるようなことをして可能です。（記事には、ヘッダ・列を固定するための質問者さんのやりたいこととは関係ないスタイルの設定も書いてありますが、そこは無視してください）

GridView のヘッダ、列を固定
http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

記事を見ていただければ分かると思いますが、ヘッダを 2 段にするだけでもかなり大変です。このような苦労をしてまで GridView にこだわるより、ListView に切り替えた方が開発工数も保守工数も少なくてすむと思います。（特に保守工数。上の記事は自分で作った例ですが、何がどうなっているのか思い出すのが大変）

なお、データ行を 2 段にするの無理です。もし将来その可能性があるなら、GridView で何とかしようと考えるより、即 ListView を使う方向に進むことをお勧めします。

Comments

[doremifa]

何度もありがとうございます。

いただいたサイトを参考にやってみると二段の表示はできました。
ただ、「text-align: center;」のCSSを両方にセットしているのですが
colspanで結合されたセルだけ中央よせになりません。
別の書き方が必要でしょうか？

ListViewのすすめありがとうございます。
正直なところ無駄なこだわりでGridviewを選択してるなぁという気は
私自身もしていますので別のものをつくるときには最初からListView
ありきでやりたいと思います。
が、今回は結構つくってしまったこともあるのでGridView統一で実行し、
Gridviewが何に向いてないのか、何が楽なのか体で目いっぱい学びたいと思います。
よろしくお願いできれば幸いです。

[退会済みユーザー]

「別の書き方」と言われても、そもそもの元の書き方がどうなっているのか分からないので答えようがありません。と言って、元の書き方を示してもらうと言うのも何ですので、私が紹介した記事に書いてあるようなコピペすれば動いて、質問者さんの問題を回答者の方でも再現できるサンプルを作ってアップしていただけませんか？

[doremifa]

アドバイスをお願いしている身で恐縮ですが
名前を変えたりが大変で今のコードからサンプルを出すのは厳しい側面もあります。

差支えない部分を切り出すしかないのですが
いただいたサンプルとの違いは

.text_center{
text-align: center;
}

というstyleをつくってあって

row1.CssClass = "text_center";
row2.CssClass = "text_center";

のようにしているぐらいなのですが
横に結合しているセルだけ(上の図でいうヘッダーB)が左寄になっているのです。
他は正常にセンタリングされているのですが・・・。

[退会済みユーザー]

それでは自分には分かりません。回答者の方でいろいろ想像して答えるということを期待されているとすれば、自分には無理です。

「差支えない部分を切り出す」か、先に私が紹介した記事のコードをベースに話をすることはできませんか？　そうしないと何も具体的なことが分からず、話が進みません。

でも、自分としては、そういうことに時間を費やすより ListView を使うことに方向転換することをお勧めしますが。

[退会済みユーザー]

念のため、先に私が紹介した記事のサンプルコードで、今回の質問とは関係ないヘッダ・列を固定するための処置を削除して（具体的には、(1) Quirks モードに設定するための meta タグをコメントアウト、(2) style タグの中のスタイル .FreezingHeader1 から #freezingDiv までをコメントアウト、(3) GridView の OnPreRender="GridView1_PreRender を削除）結果をみてみましたが、全て期待通りセンタリングされています。

以下の画像（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 開発者ツールを使って、問題の部分が何の要素で、それにスタイルがどのように適用されているか調べてください。

今提供されている情報で自分がお手伝いできるのはここまでです。質問者さんの方がこれ以上情報を提供できないのであれば、この先は自助努力でお願いします。

[doremifa]

他にセレクタの詳細度が深いものがあり、そちらが優先されていたため
CSSが反映されていないことが原因でした。
丁寧にご教授くださりありがとうございました。