Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

GridViewコントロールの新しいプロパティでスタイルを設定

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/03/31 14:00

 ASP.NET 4.0ではGridViewコントロールに、SortedAscendingHeaderStyle、SortedAscendingCellStyle、SortedDescendingHeaderStyle、SortedDescendingCellStyleの4つのスタイルプロパティが追加されました。この記事では、これらの新しいプロパティを使って、並べ替え列のスタイルを設定する方法について説明します。

目次

はじめに

 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プロパティとは異なる値に設定するだけです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5