デベロッパー

デベロッパー

ASP.NET 4.0のGridViewの新しい並べ替えスタイル

Scott Mitchell
2010年4月27日 / 10:00
 
 

はじめに

 ASP.NETツールボックスの各Webコントロールと同じように、GridViewには、CssClassFontForeColorBackColorWidthHeightをはじめとする、スタイル関連のさまざまなプロパティが含まれています。また、GridViewには、RowStyleAlternatingRowStyleHeaderStylePagerStyleなど、グリッド内の特定のクラスの行に適用されるスタイルプロパティも含まれています。これらのメタスタイルプロパティにはそれぞれ、サブプロパティとして標準のスタイルプロパティ(CssClassFontなど)が用意されています。

 ASP.NET 4.0では、GridViewコントロールにSortedAscendingHeaderStyleSortedAscendingCellStyleSortedDescendingHeaderStyleSortedDescendingCellStyleの4つの新しいスタイルプロパティが追加されました。これらの4つのプロパティは、RowStyleHeaderStyleのようなメタスタイルプロパティですが、セルの行ではなく''列''に適用されます。これらのプロパティは、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つの新しいプロパティSortAscendingStyleSortDescendingStyleを追加する方法を説明しています。これらのプロパティと一緒に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プロパティのBackColorYellowに設定するだけです。

<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true" 
      ...
      SortedAscendingCellStyle-BackColor="Yellow"
      SortedDescendingCellStyle-BackColor="Yellow">
   ...
</asp:GridView> 
 次のスクリーンショットは、NorthwindデータベースのProductsテーブルの情報を一覧表示したGridViewです。このデータはCategory列を基準に並べ替えられています。Category列のデータ行がどのようにハイライト表示されているかに注目してください。

並べ替え列のデータが黄色でハイライト表示されている
並べ替え列のデータが黄色でハイライト表示されている
 並べ替え列のデータ行をハイライト表示する方法を、並べ方が昇順か降順かに応じて変えるには、単にSortedDescendingCellStyleプロパティのBackColorSortedAscendingCellStyleプロパティとは異なる値に設定するだけです。

並べ替え列のヘッダーセルに並べ替えの矢印を追加する

 SortedAscendingHeaderStyleプロパティとSortedDescendingHeaderStyleプロパティにちょっとしたCSSを組み合わせるだけで、並べ替え列のヘッダーセルに上向き矢印と下向き矢印を追加して、データの並べ替えが昇順か降順かを示すことができます。まず、何らかの上向きと下向きのイメージが必要です。この記事のダウンロードファイルにもこのような2つのイメージが含まれていますが、もちろん自分で作成したり、オンラインで同様のイメージを探したりすることも可能です。次に、sortasc-headersortdesc-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;
} 
 このCSSを外部の.cssファイルまたは<head>要素の内部のどちらかで定義しておけば、後はsortasc-headersortdesc-headerのCSSクラスを使うようにGridViewのSortedAscendingHeaderStyleSortedDescendingHeaderStyleをそれぞれ構成するだけです。このためには、これらのプロパティの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

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全体およびGridViewの特定の部分(行、1行おきの行、ヘッダー行など)の両方に対して、CSSクラス、フォント、色、境界線など、表示に関連する設定を指定できました。このようにプロパティが数え切れないほどあるにもかかわらず、これまでのGridViewには、並べ替え列の表示方法を指定するプロパティが含まれていませんでした。並べ替え列の外観をカスタマイズするには、作成者がコードを書く必要がありました。

 うれしいことに、この短所はASP.NET 4.0で解決されました。ASP.NET 4.0のGridViewには、並べ替え列のヘッダーセルとデータセルの外観をカスタマイズするための4つの新しいスタイル関連のプロパティSortedAscendingHeaderStyleSortedAscendingCellStyleSortedDescendingHeaderStyleSortedDescendingCellStyleが含まれています。この記事では、これらのプロパティを使って、データの並べ替えが昇順か降順かに応じて、並べ替え列のヘッダーセルに上向き矢印または下向き矢印を追加する方法を説明しました。また、並べ替え列のデータセルをハイライト表示する方法も説明しました。この記事に記載したコードとスクリーンショットは、ダウンロードファイルに収録されています。

 それでは、ハッピープログラミング!

参考資料

著者紹介

Scott Mitchell(Scott Mitchell)
【関連記事】
ASP.NET 4.0におけるURLルーティング
アクティブコアの「レコメンドウエアハウス」が ASP.NET に正式対応
ASP.NETアプリケーションにカラーピッカーコントロールを追加する
ASP.NETで画像のアップロードとサムネイルの作成を行うには
ASP.NETで構築したWebサイトからFlickr.Netライブラリを使ってFlickrの画像にアクセスする

New Topics

Special Ad

ウマいもの情報てんこ盛り「えん食べ」
ウマいもの情報てんこ盛り「えん食べ」 「えん食べ」は、エンジョイして食べる、エンターテイメントとして食べものを楽しむための、ニュース、コラム、レシピ、動画などを提供します。 てんこ盛りをエンジョイするのは こちらから

Hot Topics

IT Job

Interviews / Specials

Popular

Access Ranking

Partner Sites