Tweet

.NET TIPS ［ASP.NET］ListViewコントロールで表示項目をグルーピングするには？［3.5、C#、VB］ 山田 祥寛 2009/08/20

　「TIPS：［ASP.NET］ListViewコントロールで非定型のリストを表示するには？」では、ListViewコントロールを利用した単純なリスト出力について解説した。

　しかし、ListViewコントロールでは、与えられたデータソースの内容を一様に出力するだけではなく、データ項目をある決められた個数でグルーピングし、そのグループに対してレイアウトを設定することも可能である。

　グループ化を利用することで、具体的には、以下のようなレイアウトを出力することができる。

ListViewコントロールで段組みを行った例

　上の画面では、書籍情報を3レコードごとにグループ化することで、3段組みのリストを生成している。本稿では、このようなレイアウトを実装する具体的なコード（手順）について解説していく。

●グルーピングの基本

　それではさっそく、具体的な手順を見ていくことにしよう。なお、本稿のサンプルは、前述の「TIPS：［ASP.NET ListViewコントロールで非定型のリストを表示するには？」でListView.aspxファイルをすでに作成していることを前提とし、その差分の手順についてのみ解説していく。ListViewコントロールの基本については、前述のTIPSもご参照いただきたい。

　グルーピングといっても、定型的なn段組みのレイアウトを作成するだけならば難しいことはない。ListViewコントロールのタスク・メニューから［ListView の構成］を選択し、［ListView の構成］ダイアログの［レイアウトの選択］欄から「並べて表示」を選択するだけだ。

［ListView の構成］ダイアログ

　これによって、3段組みのレイアウトが生成できる。1つのグループに含まれる項目数（＝段の数）は、GroupItemCountプロパティで変更が可能である（デフォルト値は3）。

　［ListView の構成］ダイアログを閉じると、フォーム・デザイナ上から、以下のように段組みされたレイアウトが確認できるはずだ。

段組みされたListViewコントロール

　実際に実行して、冒頭の画面のような段組みリストが表示されることも確認してほしい。

　もっとも、これだけではまったく応用が利かないので、コード・エディタから自動生成されたコードも確認してみよう（コードは理解しやすいように、意味の変わらない範囲で整形している）。

<asp:ListView ID="ListView1" runat="server" DataKeyNames="isbn"   DataSourceID="sds" InsertItemPosition="LastItem" GroupItemCount="3">   <%--ListViewの外枠を決めるテンプレート--%>   <LayoutTemplate>     <table runat="server">       <tr runat="server">         <td runat="server">           <table ID="groupPlaceholderContainer"             runat="server" border="0" style="">             <tr ID="groupPlaceholder" runat="server">               </tr>           </table>         </td>       </tr>       <tr runat="server">         <td runat="server" style="">         </td>       </tr>     </table>   </LayoutTemplate>   <%--グループの外枠を決めるテンプレート--%>   <GroupTemplate>     <tr ID="itemPlaceholderContainer" runat="server">       <td ID="itemPlaceholder" runat="server">         </td>     </tr>   </GroupTemplate>   <%--個別項目のテンプレート--%>   <ItemTemplate>     <td runat="server" style="">       ……中略……     </td>   </ItemTemplate>   <%--個別項目（代替）のテンプレート--%>   <AlternatingItemTemplate>     <td runat="server" style="">       ……中略……     </td>   </AlternatingItemTemplate>   <%--データセットが空の場合の表示を決めるテンプレート--%>   <EmptyDataTemplate>       <table runat="server" style="">       <tr>         <td>データは返されませんでした。</td>       </tr>     </table>   </EmptyDataTemplate> <%--空項目に適用されるテンプレート--%>   <EmptyItemTemplate>     <td runat="server" />   </EmptyItemTemplate>   <%--挿入項目のテンプレート--%>   <InsertItemTemplate>     <td runat="server" style="">       ……中略……     </td>   </InsertItemTemplate>   <%--編集項目のテンプレート--%>   <EditItemTemplate>     <td runat="server" style="">       ……中略……     </td>   </EditItemTemplate>   <%--選択項目のテンプレート--%>   <SelectedItemTemplate>     <td runat="server" style="">       ……中略……   </SelectedItemTemplate> </asp:ListView>

ListViewコントロールの自動生成されたテンプレート定義（ListView.aspx）

　グループ化を行う場合、LayoutTemplateテンプレートには、個別項目のプレイスホルダを表す“itemPlaceHolder”というID値を持つ要素の代わりに、“groupPlaceholder”というID値を持つ要素を含めなければならない（）。“groupPlaceHolder”ID値を持つ要素とは、名前のとおり、バインドされたグループ項目を埋め込むためのプレイスホルダである（具体的には、GroupTemplateテンプレートの内容）。

　その上で、GroupTemplateテンプレートの側では、もともとLayputTemplateテンプレートに配置していた“itemPlaceHolder” ID値を持つ要素を配置するわけだ（）。これによって、LayoutTemplate→GroupTemplate→XxxxxItemTemplateという階層が定義される。

●補足）EmptyItemTemplateテンプレート

　グルーピングに絡んで、もう1つ、EmptyItemTemplateテンプレートについても補足しておこう（リストの）。リスト上のコメントは、「空項目に適用されるテンプレート」と記しておいたが、この説明ではちょっと分かりにくいかもしれない。

　例えば、グループごとの項目数が3で、データの総数が12であるような状況を考えてみよう。この場合、挿入項目が加わって、実際のデータ総数は13であるので、最後のグループでは表示するデータが1つしかない。その場合に、空の項目部分の表示を決定するのがEmptyItemTemplateテンプレートの役割なのである。

　上記のリストを見ると分かるように、EmptyItemTemplateテンプレートはデフォルトで空のセルを出力するようになっているが、取りあえずロゴ画像を表示するようにコードを改めてみよう（追記部分は太字で表している）。

　この状態で、いま一度、ListView.aspxを実行してみよう。

EmptyItemTemplateテンプレートにロゴ画像を追加した場合の結果

　上の画面のように、リスト末尾の空項目にロゴ画像が表示されることが確認できるはずだ。

この記事と関連性の高い別の.NET TIPS ［ASP.NET］ListViewコントロールで非定型のリストを表示するには？ ListViewコントロールで項目を選択できないようにするには？ ListViewコントロールへ項目を追加するには？ ［ASP.NET］DataPagerコントロールでページャのレイアウトをテンプレート定義するには？ ［ASP.NET］ログイン・コントロールのレイアウトをテンプレート定義するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）