SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Mitchell(Scott Mitchell)

http://www.4guysfromrolla.com/ScottMitchell.shtml

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5012 2010/03/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング