デベロッパー
デベロッパー
ASP.NET 4.0のGridViewの新しい並べ替えスタイル
はじめに
ASP.NETツールボックスの各Webコントロールと同じように、GridViewには、CssClass、Font、ForeColor、BackColor、Width、Heightをはじめとする、スタイル関連のさまざまなプロパティが含まれています。また、GridViewには、RowStyle、AlternatingRowStyle、HeaderStyle、PagerStyleなど、グリッド内の特定のクラスの行に適用されるスタイルプロパティも含まれています。これらのメタスタイルプロパティにはそれぞれ、サブプロパティとして標準のスタイルプロパティ（CssClass、Fontなど）が用意されています。ASP.NET 4.0では、GridViewコントロールに
SortedAscendingHeaderStyle、SortedAscendingCellStyle、SortedDescendingHeaderStyle、SortedDescendingCellStyleの4つの新しいスタイルプロパティが追加されました。これらの4つのプロパティは、RowStyleやHeaderStyleのようなメタスタイルプロパティですが、セルの行ではなく''列''に適用されます。これらのプロパティは、GridViewの並べ替え時にのみ適用されます。つまり、グリッドのデータを昇順で並べ替える場合は、SortedAscendingHeaderStyleプロパティとSortedAscendingCellStyleプロパティによって、データの並べ替えの基準列（並べ替え列）を定義します。結果を降順で並べ替えるときは、SortedDescendingHeaderStyleプロパティとSortedDescendingCellStyleプロパティが、並べ替え列に適用されます。これらの4つの新しいプロパティを使えば、データの並べ替え列の外観を以前よりも簡単にカスタマイズできます。これらのプロパティと一緒にカスケーディングスタイルシート（CSS）を少し使うことで、並べ替え列のヘッダーに上向き矢印と下向き矢印を追加して、データの並べ方が昇順か降順かを示すことも可能です。同様に、これらのプロパティを使って、並べ替え列に網掛けを設定したり、並べ替え列のテキストを太字にしたりすることもできます。この記事では、これら4つの新しいプロパティを使って、並べ替え列のスタイルを設定する方法について説明します。では、始めましょう。
ASP.NET 4.0の状況とリリース日について
現時点（本記事の執筆時点）では、ASP.NET 4.0のベータ版を入手できます。.NET Framework 4.0とVisual Studio 2010 Beta 2をダウンロードすることもできますし、正式なリリースまで待つという選択肢もあります。今のところ、ASP.NET 4.0は2010年4月にリリースされる予定です。
GridViewの並べ替えの概要
既定では、GridViewにはヘッダー行があり、そこに各列の名前がテキストで表示されます。並べ替えを有効にするには、GridViewのAllowSortingを設定します。この設定を行うと、GridViewはヘッダー行の表示にLinkButtonコントロールを使うようになります。このコントロールをクリックすると、ポストバックが発生し、並べ替えのワークフローが開始されます。GridViewがデータソースコントロールにバインドされていれば（通常は）これで終わりです。並べ替えのロジックを処理するためのコードを書く必要はありません。並べ替えのロジックはデータソースコントロールとGridViewによって自動的に処理されます（データソースコントロールの代わりに、プログラムを使ってデータをGridViewにバインドしている場合は、エンドユーザーが指定した順序で並べ替えられたデータを取得する、GridViewのSortingイベント用のイベントハンドラを作成する必要があります）。エンドユーザー側から見た場合は、ヘッダー行にあるリンクのいずれかをクリックすると、その列を基準に昇順でグリッドのデータが並べ替えられます。同じリンクをもう一度クリックすると、データは降順で並べ替えられます。残念ながら、GridViewは、グリッドがどの列を基準に並べ替えられているかや、データの並べ方が昇順か降順かに関しての視覚的なフィードバックを提供しません。ASP.NET 4.0より前のリリースでこのようなフィードバックを実装するには、ちょっとしたコードを自分で書くしかありませんでした。以前の記事「Extending the GridView to Include Sort Arrows」で、GridViewコントロールを拡張して2つの新しいプロパティ
SortAscendingStyleとSortDescendingStyleを追加する方法を説明しています。これらのプロパティと一緒にCSSを少し使えば、並べ替え列に矢印を追加できます（同様に、列に網掛けを設定したり、テキストを太字にしたり、その他のスタイル関連のプロパティを設定したりすることもできます）。「Extending the GridView to Include Sort Arrows」で作成したカスタムのGridViewコントロールは、ASP.NET 4.0より前のリリースのアプリケーションでは有効ですが、ASP.NET 4.0ではGridViewに新しいプロパティが追加されるため、使わないようにしてください。
並べ替え関連の新しいスタイルプロパティ
ASP.NET 4.0のGridViewには、4つの新しいスタイルプロパティが含まれています。これらを使って、ページ作成者は、グリッドデータの並べ替えの基準になった列の外観を定義できます。SortedAscendingHeaderStyle：GridViewのデータを昇順で並べ替える場合に、並べ替え列のヘッダーセルのスタイルを定義します。SortedAscendingCellStyle：GridViewのデータを昇順で並べ替える場合に、並べ替え列のデータセルのスタイルを定義します。SortedDescendingHeaderStyle：GridViewのデータを降順で並べ替える場合に、並べ替え列のヘッダーセルのスタイルを定義します。SortedDescendingCellStyle：GridViewのデータを降順で並べ替える場合に、並べ替え列のデータセルのスタイルを定義します。
SortedAscendingCellStyleプロパティとSortedDescendingCellStyleプロパティのBackColorをYellowに設定するだけです。
<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
...
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow">
...
</asp:GridView>
並べ替え列のデータが黄色でハイライト表示されている
SortedDescendingCellStyleプロパティのBackColorをSortedAscendingCellStyleプロパティとは異なる値に設定するだけです。並べ替え列のヘッダーセルに並べ替えの矢印を追加する
SortedAscendingHeaderStyleプロパティとSortedDescendingHeaderStyleプロパティにちょっとしたCSSを組み合わせるだけで、並べ替え列のヘッダーセルに上向き矢印と下向き矢印を追加して、データの並べ替えが昇順か降順かを示すことができます。まず、何らかの上向きと下向きのイメージが必要です。この記事のダウンロードファイルにもこのような2つのイメージが含まれていますが、もちろん自分で作成したり、オンラインで同様のイメージを探したりすることも可能です。次に、sortasc-headerやsortdesc-headerなど、昇順ヘッダーセル用と降順ヘッダーセル用の2つのCSSクラスを作成する必要があります。これらのクラスで、上向き矢印イメージと下向き矢印イメージのURLを指定します。また、上向き矢印と下向き矢印がヘッダーセルのテキストで隠れないように、ヘッダー行のリンクの右側に余白を追加するCSSルールも含める必要があります。
.sortasc-header A
{
background:url(URL to up arrow image) right center no-repeat;
}
.sortdesc-header A
{
background:url(URL to down arrow image) right center no-repeat;
}
TH A
{
padding-right: 20px;
}
<head>要素の内部のどちらかで定義しておけば、後はsortasc-headerとsortdesc-headerのCSSクラスを使うようにGridViewのSortedAscendingHeaderStyleとSortedDescendingHeaderStyleをそれぞれ構成するだけです。このためには、これらのプロパティのCssClassプロパティを次のように設定します。
<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
...
SortedAscendingHeaderStyle-CssClass="sortasc-header"
SortedDescendingHeaderStyle-CssClass="sortdesc-header"
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow">
...
</asp:GridView>
Category列を基準として昇順に並べ替えたGridView
Category列を基準として降順に並べ替えたGridView
GridViewの見栄えを良くする
前述の例で、GridViewの並べ替えに関連する4つの新しいスタイルプロパティを紹介しましたが、これらの例で使ったGridViewは見栄えがあまりよくありません。こういう不恰好なデモを見ると、GridViewをきれいに見せるのは無理なのかと思うかもしれませんが、そうではありません。デザインのスキルと芸術的センスが少しあれば、美しいGridViewを作成できます。私はもちろんデザイナではないのですが、Color Scheme DesignerのようなWebサイトや、FAMFAMFAMのようなWebサイトにある無償のアイコンセットを使えば、私のようなセンスのない古いプログラマでも、そこそこのGridViewを作ることができます（この記事のダウンロードファイルでも、こういった皆さんのお力を借りています）。きれいなGridViewを作成するためのもう1つの素晴らしいリソースとして、Matt Bersethのブログを紹介しましょう。Mattのブログには、GridViewコントロールの拡張に関するセクションがあり、そこに、GridViewのスタイルを設定するためのCSSルールやコード（必要な場合）を紹介するエントリがいくつか含まれています。この記事のダウンロードファイルには、Mattのデモの1つ（Building a VS2008 Styled Grid with the GridView Control）を、ASP.NET 4.0の並べ替え関連の新しいスタイルプロパティを使用するようにアップデートしたものが含まれています。
次のスクリーンショットのデータは、前掲のスクリーンショットのデータと同じですが、今回はMattのCSSクラスを使用しています。このデータは、Category列を基準として昇順で並べ替えられています。この並び順をユーザーに示すために、Categoryヘッダーセルに下向き矢印を表示し、データセルをハイライト表示しています。
もう少し見た目を工夫したGridView
まとめ
リリース以降、GridViewコントロールには数多くのスタイル関連のプロパティが組み込まれてきました。ページ作成者は、GridView全体およびGridViewの特定の部分（行、1行おきの行、ヘッダー行など）の両方に対して、CSSクラス、フォント、色、境界線など、表示に関連する設定を指定できました。このようにプロパティが数え切れないほどあるにもかかわらず、これまでのGridViewには、並べ替え列の表示方法を指定するプロパティが含まれていませんでした。並べ替え列の外観をカスタマイズするには、作成者がコードを書く必要がありました。うれしいことに、この短所はASP.NET 4.0で解決されました。ASP.NET 4.0のGridViewには、並べ替え列のヘッダーセルとデータセルの外観をカスタマイズするための4つの新しいスタイル関連のプロパティ
SortedAscendingHeaderStyle、SortedAscendingCellStyle、SortedDescendingHeaderStyle、SortedDescendingCellStyleが含まれています。この記事では、これらのプロパティを使って、データの並べ替えが昇順か降順かに応じて、並べ替え列のヘッダーセルに上向き矢印または下向き矢印を追加する方法を説明しました。また、並べ替え列のデータセルをハイライト表示する方法も説明しました。この記事に記載したコードとスクリーンショットは、ダウンロードファイルに収録されています。それでは、ハッピープログラミング！
参考資料
著者紹介
Scott Mitchell（Scott Mitchell）
New Topics
Special Ad
| “超高速無線 LAN 時代”の幕開け--新規格 11ac（Draft）に対応したバッファロー最新ルーターの潜在能力を試す | |
 |
バッファローは次世代無線 LAN 規格 IEEE802.11ac（Draft）通信速度最大 1,300Mbps 対応無線 LAN ルーター「WZR-1750DHP」を3月下旬に販売開始。今回、同機器を入手できたので、使用感や便利な機能についてレポートしたい。⇒詳細記事へ |
Hot Topics
IT Job
今週のIT求人情報
その他 IT求人情報はこちら
Interviews / Specials
Follow japan.internet.com
Popular
Access Ranking
Partner Sites