ASP.NET 徹底活用術のホームへ戻る

DataGridに列の並べ替え機能を組み込む ~dg1.aspx

 

新規Webフォームを作成したら、ツールボックスから[DataGrid]をドラッグしてデザイナにドロップします。デザイナにDataGrid1のオブジェクトが作成されます。DataGridに並べ替え機能を追加するには、デザイナからDataGridを右クリックして[プロパティビルダ]を選択します。「プロパティビルダ」のダイアログが表示されたら、左側から[全般]を選択して「並べ替えを有効にする」をクリックしてチェックマークを付けます。

 

図1: DataGridのプロパティビルダから並べ替えを有効にする

 

 

「プロパティビルダ」の左側から[]を選択したら、「実行時に自動的に列を作成する」をクリックしてチェックを外します。並べ替え機能を使用するときは、列の自動生成機能を無効にして「連結列」をバインドする必要があります。

 

プロパティビルダの「使用可能な列」から[連結列]を選択したら、[>]ボタンをクリックします。「連結列」が「選択された列」に移動したら、BoundColumnプロパティの「ヘッダーテキスト」に「ID」、「データフィールド」に「CustomerID」を入力します。「式の並べ替え」には、並べ替えするフィールドを入力します。ここでは、「データフィールド」と同じ「CustomerID」を入力します。「CustomerID」を昇順に並べ替えするには、「CustomerID ASC」のように「ASC」を追加します。「CustomerID」を降順に並べ替えするには、「CustomerID DESC」のように「DESC」を追加します。「ASC」と「DESC」を省略したときは、「ASC」がデフォルト値になります。

 

同様の手順で、表1を参照しながら「得意先」、「担当」、「電話」、「都道府県」の連結列を追加します。「得意先」の連結列は、50音順に並べ替えしますので「式の並べ替え」に「CompanyKana」を入力します。

 

 

表1:DataGridに追加する連結列とプロパティ

ヘッダーテキスト

データフィールド

式の並べ替え

ID

CustomerID

CustomerID

得意先

CompanyName

CompanyKana (※)

担当

ContactName

ContactName

電話

Phone

Phone

都道府県

Ken

Ken

※:得意先は50音順に並べ替えしますので得意先のカナ「CompanyKana」を指定します。

 

 

2DataGridのプロパティビルダから連結列を追加する

 

 

「プロパティビルダ」から[OK]ボタンをクリックしてダイアログを閉じます。デザイナのDataGridのヘッダーに表示される列見出しがハイパーリンクに変わります。

 

3DataGridの列見出しがハイパーリンクになる

 

DataGridの列見出しをクリックしたときに、列を並べ替えするにはDataGridSortCommandイベントハンドラを追加します。デザイナの未使用領域をダブルクリックして、コードウィンドウを表示したら、左上の「クラス」のドロップダウンリストから”DataGrid1”を選択します。右上の「メソッド名」のドロップダウンリストから”SortCommand”を選択します。DataGrid1_SortCommandイベントハンドラが生成されたら、次のコードを追加します。

 

Private Sub DataGrid1_SortCommand( _

  ByVal source As Object, ByVal e As _

  System.Web.UI.WebControls.DataGridSortCommandEventArgs) _

  Handles DataGrid1.SortCommand

  BindDataGrid(e.SortExpression)

End Sub

 

引数eSortExpressionプロパティには、並べ替えするフィールドが格納されています。このプロパティには、連結列の「式の並べ替え」で指定したフィールドが格納されます。たとえば、得意先の列見出しをクリックしたときは、「CompanyKana」が格納されます。BindDataGridメソッドの引数には、並べ替えするフィールドを指定します。

 

BindDataGridは、CreateDataViewメソッドを実行して得意先(Customers)テーブルのDataViewを作成します。CreateDataViewの引数には、得意先テーブルからレコードを抽出するためのSQLステートメントを指定します。

 

DataViewを作成したら、Sortプロパティに並べ替えするフィールドを設定してDataViewを並べ替えします。DataGridDataSourceプロパティにDataViewを設定したら、DataBindメソッドを実行します。これで、DataGridの列が並べ替えされて表示されます。

 

リスト1DataGridに得意先テーブルをバインドする (dg1.aspx.vb)

Sub BindDataGrid(ByVal strSort As String)

  Dim strSQL As String = "Select * From Customers"

  Dim dv As DataView = CreateDataView(strSQL)

  dv.Sort = strSort

  With DataGrid1

    .DataSource = dv

    .DataBind()

  End With

End Sub

 

CreateDataViewは、DataAdapterFillメソッドを実行して得意先テーブルのすべてのレコードを抽出してDataTableに格納します。DataTableからDataViewを作成するには「New DataView(dt)」のように記述します。

 

リスト2Nwind.mdbの得意先テーブルをDataViewに読み込んで返す(dg1.aspx.vb)

Function CreateDataView(ByVal strSQL As String) As DataView

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

      Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim da As New OleDbDataAdapter(strSQL, con)

  Dim dt As New DataTable

  da.Fill(dt)

  Return New DataView(dt)

End Function

 

Webページをブラウザに表示したら、DataGridのヘッダーから[得意先]のリンクをクリックしてみてください。DataGridの得意先が50音順に並べ替えられて表示されます。

 

4DataGridのヘッダーから「得意先」をクリックして50音順に並べ替える

 

ASP.NET 徹底活用術のホームへ戻る