DataGridに並べ替え機能を付加するには

 

  DataGridに並べ替え機能を付加したサンプル

 

DataGridに並べ替え機能を付加したサンプル

 

このサンプルは、DataGridに並べ替え機能を追加しています。ヘッダに表示されているリンクをクリックするとそのカラムを昇順に並べ替えします。

 

このサンプルでは、以下のノウハウを習得することができます。

 

  DataGridに並べ替え機能を付加する方法(AllowSorting)

  DataGridのカラムに並べ替えするフィールドを指定する方法(SortExpression)

  SortExpressionプロパティに昇順/降順のオプションを指定する方法(Asc/Desc)

  SortExpressionプロパティに複数のフィールドを指定する方法

  OnSortCommandイベントの使い方

 

DataGridに並べ替え機能を付加するには、DataGridAllowSortingプロパティにTrueを設定します。また、並べ替えするカラムをBoundColumnで指定する必要がありますのでAutoGenerateColumnsプロパティをFalseに設定します。カラムの並べ替えは、DataGridOnSortCommandイベントで行います。

 

54-58では、BoundColumnを定義しています。行55では、DataFieldプロパティに得意先ID(CustomerID)を設定しています。また、HeaderTextプロパティにはカラムヘッダに表示するテキスト(ID)を設定しています。行56では、SortExpressionプロパティに並べ替えする得意先テーブルのフィールド名(CustomerID)を設定しています。昇順(Asc)、降順(Desc)のオプションを省略すると昇順が仮定されます。得意先IDを降順に並べ替えするには、SortExpression”Customer Desc”のように設定します。複数のフィールドを並べ替えするときは、コンマ区切りで設定します。

 

SortExpression=”CustomerID Desc”

SortExpression=” Kana Asc, SalesAmount Desc”

 

42: <asp:DataGrid id="dgrdCustomers" runat="server"
 43:   AutoGenerateColumns="False"
 44:   AllowSorting="True"
 45:   OnSortCommand="dgrdCustomers_SortCommand"
       ::: >

:::
 53:   <Columns>
 54:     <asp:BoundColumn
 55:       DataField="CustomerID" HeaderText="ID"
 56:       SortExpression="CustomerID">
 57:       <ItemStyle HorizontalAlign="Right" />
 58:     </asp:BoundColumn>

:::
 67:   </Columns>
 68: </asp:DataGrid>

 

DataGridのヘッダに表示されているリンクをクリックすると、OnSortCommandイベントが発生します。このイベントでは、引数としてDataGridSortCommandEventArgsクラスが渡されます。このクラスには、SortExpressionプロパティがサポートされていますので、BoundBolumnSortExpressionプロパティに設定したフィールド名を取得することができます。行14では、SortExpressionプロパティをSub BindDataGrid()に渡しています。

 

12: Sub dgrdCustomers_SortCommand( _
 13:   s As Object, e As DataGridSortCommandEventArgs)
 14:   BindDataGrid(e.SortExpression)
 15: End Sub

 

Sub BindDataGrid()では、得意先テーブルを引数で指定されたフィールドで並べ替えしてDataGridに再表示します。行18-21では、StringBuilderクラスのAppend()メソッドを使用してSQLSelectステートメントを生成しています。行21では、Order By句に並べ替えするフィールド名を指定しています。たとえば、電話番号のリンクをクリックしたときは、以下のようなSQLが生成されます。

 

Select CustomerID, Left(CompanyKana,4) As Kana, CompanyName, Phone

From Customers Order By Phone

 

22-24では、OleDbConnectionOleDbCommandのインスタンスを生成しています。行26-29では、OleDbConnectionOpen()メソッドでデータベースを開いてOleDbCommandExecuteReader()メソッドでOleDbDataReaderを生成してDataGridにバインドしてデータベースを閉じています。これで、DataGridにはSortExpressionに設定したフィールドで並べ替えしたデータが表示されます。行30では、LabelTextプロパティに並べ替えしたフィールド名を設定して表示しています。電話番号のリンクをクリックしたときは、「Sorted on Phone」のようにPhoneが太字で表示されます。

 

17: Sub BindDataGrid(strSortField As String)
 18:   Dim sbSQL As New StringBuilder("Select CustomerID, ")
 19:   sbSQL.Append("Left(CompanyKana,4) As Kana, ")
 20:   sbSQL.Append("CompanyName, Phone ")
 21:   sbSQL.Append("From Customers Order by " & strSortField)
 22:   Dim con As New OleDbConnection( _
 23:     ConfigurationSettings.AppSettings("conStringNw"))
 24:   Dim cmd As New OleDbCommand(sbSQL.ToString, con)
 26:   con.Open()
 27:   dgrdCustomers.DataSource = cmd.ExecuteReader()
 28:   dgrdCustomers.DataBind()             
 29:   con.Close()
 30:   lblStatus.Text = String.Format("Sorted on <b>{0}</b>", strSortField)
 31: End Sub

 

Tip

DataGridの並べ替え処理を高速化するには

 

このサンプルは、得意先テーブルをバインドするのにOleDbDataReaderを使用しています。OnSortCommandイベントでも、同様にOleDbDataReaderを生成してバインドしています。つまり、並べ替えのリンクをクリックする度にOleDbCommandExecuteReader()メッドでSQLSelectステートメントを実行しています。DataGridの並べ替えを高速化するには、OleDbDataReaderの代わりにDataSetDataViewを生成してWebサーバのメモリ上にキャッシュします。DataViewをキャッシュするには、Cache(“myDataView”)=myDataViewのように記述します。この場合、OnSortCommandイベントでは、Cache()からDataViewを生成してSortプロパティを使用して並べ替えします。

 

da.Fill(ds)

myDataView = ds.Tables(0).DefaultView

Cache(strCacheKey) = myDataView

:::

myDataView = Cache(strCacheKey)

myDataView.Sort = strSortExpression

 

 

Tip

DataGridViewStateを無効にして高速化するには

 

このサンプルでは、DataGridEnableViewStateプロパティにTrueを設定していますので、DataGridに表示されるデータがViewStateにも保存されます。DataGridViewState機能を使用するときは、Page_Loadイベントでページが最初にロードされたときデータベースからデータを読み込んでバインドします。ポストバックされたときは、データベースからデータを読み込む代わりにViewStateからデータを復元してDataGrid上に表示します。

 

If Not IsPostBack Then

  BindDataGrid()

End If

 

DataGridの並べ替え、ページング機能を使用するときは、ページがポストバックされたときにデータベースから再度データを読み込むためViewStateに保存する必要がありません。DataGridViewStateに保存しないようにするには、EnableViewStateプロパティにFalseを設定します。

 

<asp:DataGrid id=”dgrdCustomers” runat=”server”

  EnableViewState=”False” ::: />

 

ViewStateのサイズは、以下のようなコードを追加して調べることができます。

 

Dim objViewState As Object = Request("__VIEWSTATE")
If objViewState Is Nothing Then
  Trace.Warn("ViewState Size","0")
Else
  Trace.Warn("ViewState Size", objViewState.Length.ToString())
End If

 

ここで解説している並べ替え機能のサンプルの場合、ViewStateのサイズを12844バイトから168バイトに減らすことができます。ViewStateのサイズを小さくすることにより、ページロード時の負荷を軽減させることができます。

 

Private mdv As DataView
Sub Page_Load()
  BindDataGrid("")
End Sub

 

Sub BindDataGrid(strSortField As String)
  If mdv Is Nothing Then
   mdv = LoadData()
  End If
  If strSortField <> String.Empty Then
    mdv.Sort = strSortField
  End If
  dgrdCustomers.DataSource = mdv
  dgrdCustomers.DataBind()
End Sub

 

Function LoadData() As DataView
  Dim con As New OleDbConnection( _
    ConfigurationSettings.AppSettings("conStringNw"))
  Dim da As New OleDbDataAdapter(sbSQL.ToString, con)
  Dim ds As New DataSet()
  Dim dv As DataView
  da.Fill(ds, "Customers")
  dv = ds.Tables(0).DefaultView
  Return dv
End Function

 

<asp:DataGrid id="dgrdCustomers" runat="server"
  EnableViewState="False">

 

 

ASP.NET DataGridのホームへ戻る