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

 

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

 

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

 

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

 

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

 

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

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

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

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

▲  OnSortCommandイベントの使い方

 

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

 

行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プロパティがサポートされていますので、BoundBolumnのSortExpressionプロパティに設定したフィールド名を取得することができます。行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()メソッドを使用してSQLのSelectステートメントを生成しています。行21では、Order By句に並べ替えするフィールド名を指定しています。たとえば、電話番号のリンクをクリックしたときは、以下のようなSQLが生成されます。

 

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

From Customers Order By Phone

 

行22-24では、OleDbConnectionとOleDbCommandのインスタンスを生成しています。行26-29では、OleDbConnectionのOpen()メソッドでデータベースを開いてOleDbCommandのExecuteReader()メソッドでOleDbDataReaderを生成してDataGridにバインドしてデータベースを閉じています。これで、DataGridにはSortExpressionに設定したフィールドで並べ替えしたデータが表示されます。行30では、LabelのTextプロパティに並べ替えしたフィールド名を設定して表示しています。電話番号のリンクをクリックしたときは、「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を生成してバインドしています。つまり、並べ替えのリンクをクリックする度にOleDbCommandのExecuteReader()メッドでSQLのSelectステートメントを実行しています。DataGridの並べ替えを高速化するには、OleDbDataReaderの代わりにDataSetのDataViewを生成して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

DataGridのViewStateを無効にして高速化するには   このサンプルでは、DataGridのEnableViewStateプロパティにTrueを設定していますので、DataGridに表示されるデータがViewStateにも保存されます。DataGridのViewState機能を使用するときは、Page_Loadイベントでページが最初にロードされたときデータベースからデータを読み込んでバインドします。ポストバックされたときは、データベースからデータを読み込む代わりにViewStateからデータを復元してDataGrid上に表示します。   If Not IsPostBack Then   BindDataGrid() End If   DataGridの並べ替え、ページング機能を使用するときは、ページがポストバックされたときにデータベースから再度データを読み込むためViewStateに保存する必要がありません。DataGridをViewStateに保存しないようにするには、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">