DataGridに条件付書式/フィルタ機能を付加するには

 

●  DataGridに条件付書式を設定するサンプル

図 DataGridに条件付書式を設定するサンプル

 

このサンプルは、DataGridに条件付書式を設定することができます。条件付書式(Conditional Formatting)のラジオボタンから条件１(Condition1)を選択すると、単価の条件を設定するドロップダウンリストとテキストボックスが表示されます。たとえば、単価が200の商品に書式を設定するには、ドロップダウンリストから「=」を選択して、テキストボックスに「200」を入力します。Formatボタンをクリックすると、条件に一致するアイテムの背景色が小麦色で表示されます。さらに、単価が赤色で表示されます。ラジオボタンから条件２(Condition2)を選択したときは、単価に範囲（100～200）を設定することができます。

 

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

 

▲  DataGridに条件付書式を設定する方法

▲  DataGridの列の背景色(BackColor)を設定する方法

▲  DataGridのカラムの前景色(ForeColor)を設定する方法

▲  PanelコントロールでWebコントロールの表示を切り替える方法

▲  CompareValidationコントロールの使い方

 

サンプルの行111-117では、RadioButtonListでCondition1、Condition2を表示しています。行112では、RadioButtonListのAutoPostBackプロパティにTrueを設定してアイテムを選択したときにポストバックされるようにしています。行113では、OnSelectedIndexChangedイベントを登録しています。このイベントは、RadioButtonListからアイテムを選択したときに発生します。行115-116では、ListItemでRadioButtonListのアイテムを定義しています。行115では、ListItemのSelectedプロパティにTrueを設定して選択した状態にしています。

 

110:     Conditional Formatting:<br>
111:     <asp:RadioButtonList id="radlConditionalFormat" runat="server"
112:       AutoPostBack="True"
113:       OnSelectedIndexChanged="radlConditionalFormat_SelectedIndexChanged"
114:       RepeatDirection="Horizontal">
115:       <asp:ListItem Text="Condition1" Value="1" Selected="True" />
116:       <asp:ListItem Text="Condition2" Value="2" />
117:     </asp:RadioButtonList>

 

行122-138では、PanelにRadioButtonListから条件１(Condition1)を選択したときに表示するWebコントロールを定義しています。行122では、PanelのVisibleプロパティにTrueを設定していますので、Panelに定義されているすべてのWebコントロールが表示されます。行124-130では、DropDownListで比較演算子を表示しています。行125-129では、ListItemでDropDownListに表示するアイテムを定義しています。行131では、単価を入力するTextBoxを定義しています。行132-137では、CompareValidatorで単価のデータ型をチェックしています。行136では、OperatorプロパティにDataTypeCheckを設定して単価のデータ型をチェックするようにしています。行137では、Typeプロパティにデータ型として通貨型(Currency)を設定しています。これで、単価のTextBoxに通貨型以外のデータを入力するとエラーメッセージが表示されます。

 

122:     <asp:Panel id="panCondition1" runat="server" Visible="True">
123:       Price is
124:       <asp:DropDownList id="dropOperator" runat="server">
125:         <asp:ListItem Text="=" Value="EQ" />
126:         <asp:ListItem Text=">" Value="GT" />
127:         <asp:ListItem Text=">=" Value="GE" />
128:         <asp:ListItem Text="<" Value="LT" />
129:         <asp:ListItem Text="<=" Value="LE" />
130:       </asp:DropDownList>
131:       <asp:TextBox id="txtValue" runat="server" />
132:       <asp:CompareValidator runat="server"
133:         ControlToValidate="txtValue"
134:         Display="Dynamic"
135:         Text="単価が不正です！ 半角数値を入力してください."
136:         Operator="DataTypeCheck"
137:         Type="Currency" />
138:     </asp:Panel>

 

行139-156では、Panelに条件２(Condition2)を選択したときに表示するWebコントロールを定義しています。行139では、PanelのVisibleプロパティにFalseが設定されていますので、Panel内のすべてのWebコントロールは表示されません。PanelのVisibleプロパティは、RadioButtonListのOnSelectedIndexChangedイベントで書き換えます。条件２を選択したときは、単価の最小値/最大値を入力するTextBoxを表示します。行141では、最小値のTextBoxを定義しています。行142-147では、CompareValidatorで最小値のデータ型をチェックしています。行149では、最大値のTextBoxを定義しています。行150-155では、CompareValidatorで最大値のデータ型をチェックしています。最小値/最大値に通貨型以外のデータを入力したときは、エラーメッセージが表示されます。

 

139:     <asp:Panel id="panCondition2" runat="server" Visible="False">
140:       Price is between
141:       <asp:TextBox id="txtValue1" runat="server" />
142:       <asp:CompareValidator runat="server"
143:         ControlToValidate="txtValue1"
144:         Display="Dynamic"
145:         Text="単価が不正です！ 半角数値を入力してください."
146:         Operator="DataTypeCheck"
147:         Type="Currency" />
148:       and
149:       <asp:TextBox id="txtValue2" runat="server" />
150:       <asp:CompareValidator runat="server"
151:         ControlToValidate="txtValue2"
152:         Display="Dynamic"
153:         Text="単価が不正です！ 半角数値を入力してください."
154:         Operator="DataTypeCheck"
155:         Type="Currency" />
156:     </asp:Panel>

 

行161-163では、Formatボタンを定義しています。行163では、ButtonにOnClickイベントを登録しています。このイベントは、ボタンをクリックしたときに発生します。

 

161:     <asp:Button id="btnFormat" runat="server"
162:       Text="Format"
163:       OnClick="btnFormat_Click" />

 

Page_Load()イベントでは、Sub BindData()を呼び出してDataGridに商品テーブルをバインドしています。

 

  7: Sub Page_Load()
  9:     BindData()
 11: End Sub

 

条件付書式(Conditional Formattting)のRadioButtonListからアイテムを選択すると、OnSelectedIndexChangedイベントが発生します。このイベントでは、PanelのVisibleプロパティをTrue/Falseに書き換えて単価を入力するWebコントロールを表示しています。RadioButtonListから条件１(Condition1)を選択したときは、比較演算子を表示するDropDownListと単価を入力するTextBoxを表示します。条件２(Condition2)を選択したときは、単価の最小値/最大値を入力するTextBoxを表示します。

 

25: Sub radlConditionalFormat_SelectedIndexChanged(s As Object, e As EventArgs)
 26:   If radlConditionalFormat.SelectedItem.Text = "Condition1" Then
 27:     panCondition1.Visible = True
 28:     panCondition2.Visible = False
 29:   Else
 30:     panCondition1.Visible = False
 31:     panCondition2.Visible = True
 32:   End If
 33: End Sub

 

TextBoxに単価を入力して、Formatボタンをクリックするとページがポストバックされて、Page_Load()イベント、OnClickイベントの順に制御が渡ります。Page_Load()イベントでは、すでに解説したようにSub BindData()を呼び出してDataGridを初期状態で表示します。OnClickイベントでは、Sub SetConditionalFormat()を呼び出してDataGridに条件付書式を設定します。

 

35: Sub btnFormat_Click(s As Object, e As EventArgs)
 37:   SetConditionalFormat()
 38: End Sub

 

Sub SetConditionalFormat()では、DataGridの単価を比較して条件と一致するときは、列の背景色と単価の前景色を設定します。行47-58のIf…Else…End Ifでは、TextBoxに入力した単価を取得して変数に保存します。行51では、条件１を選択したときの単価を取得しています。行56-57では、条件２を選択したときの単価（最小値/最大値）を取得しています。

 

行60-96のFor…Nextでは、DataGridのItemsコレクションからカレントのアイテムの単価を取得して条件と一致するか比較しています。条件と一致するときは、アイテムの背景色を小麦色(Wheat)、単価の前景色を赤色(Red)に設定します。行61では、Itemsコレクションから４番目のカラム値（単価）を取得しています。ItemsコレクションとCellsコレクションは、0から始まります。行62では、StringクラスのReplace()メソッドで単価のコンマ(,)を除去して、ConvertクラスのToDecimal()メソッドで十進型に変換しています。

 

条件１を選択したときは、行65-86が実行されます。Select…End Selectでは、DropDownListから比較演算子(EQ, GT, GE, LT, LE)を取得して対応する演算子で比較しています。単価が比較条件と一致するときは、変数bFoundにTrueを設定します。条件２を選択したときは、行88-90が実行されます。If…End Ifでは、単価が最小値/最大値の範囲内か調べます。範囲内のときは、変数bFoundにTrueを設定します。行92-95のIf…End Ifでは、単価が比較条件と一致するとき、DataGridの列のBackColorプロパティに小麦色(Wheat)を設定します。また、単価のカラムのForeColorプロパティに赤色(Red)を設定します。これで、条件と一致する列の背景色が小麦色で、単価の前景色が赤色で表示されます。

 

40: Sub SetConditionalFormat()
 46:
 47:   If radlConditionalFormat.SelectedItem.Text = "Condition1" Then
 51:     decValue = Convert.ToDecimal(txtValue.Text)
 52:   Else ' Condition2
 56:     decValue1 = Convert.ToDecimal(txtValue1.Text)
 57:     decValue2 = Convert.ToDecimal(txtValue2.Text)
 58:   End If
 59:
 60:   For i = 0 To dgrdProducts.Items.Count - 1
 61:     Dim txtPrice As String = dgrdProducts.Items(i).Cells(3).Text
 62:     Dim decPrice As Decimal = Convert.ToDecimal( txtPrice.Replace(",","") )
 63:     bFound = False
 64:     If radlConditionalFormat.SelectedItem.Text = "Condition1" Then
 65:       Select dropOperator.SelectedItem.Value
 66:         Case "EQ"
 67:           If decPrice = decValue Then
 68:             bFound = True
 69:           End If
 70:         Case "GT" :::

74:         Case "GE" :::

78:         Case "LT" :::
 82:         Case "LE" :::
 86:       End Select
 87:     Else ' Condition2
 88:       If decPrice >= decValue1 and decPrice <= decValue2 Then
 89:         bFound = True
 90:       End If
 91:     End If
 92:     If bFound Then
 93:       dgrdProducts.Items(i).BackColor = Color.Wheat
 94:       dgrdProducts.Items(i).Cells(3).ForeColor = Color.Red
 95:     End If
 96:   Next
 97: End Sub

 

 

 

●  DataGridにフィルタ機能を付加するサンプル

図 DataGridにフィルタ機能を付加するサンプル

 

このサンプルは、DataGridに絞込み機能を追加しています。DataGridに表示されるレコードを絞り込むには、フィルタ条件（Filtering DataGrid）から条件１（Condition1）、条件２(Condition2)を選択して単価を入力します。条件１を選択したときは、比較演算子と単価を入力します。条件２を選択したときは、単価の範囲（最小値/最大値）を入力します。Filterボタンをクリックすると、フィルタ条件に一致するレコードがDataGrid上に表示されます。ReSetボタンをクリックするとフィルタ条件を解除してすべてのレコードを表示します。

 

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

 

▲  フィルタ条件を設定してDataGridのレコードを絞り込む方法

▲  PanelコントロールでWebコントロールを切り替える方法

▲  CompareValidatorの使い方

▲  DataSetからDataViewを生成する方法

▲  DataViewのRowFilterプロパティの使い方

 

サンプルの行79-85では、RadioButtonListでDataGridのフィルタ条件を表示しています。行80では、AutoPostBackプロパティにTrueを設定して、アイテムを選択したときにページがポストバックされるようにしています。行81では、OnSelectedIndexChangedイベントを登録しています。このイベントは、RadioButtonListのアイテムを選択したときに発生します。行83-84では、ListItemでRadioButtonListのアイテムを定義しています。行83では、SelectedプロパティにTrueを設定してCondition1が選択した状態で表示されるようにしています。

 

78:     Filtering DataGrid:<br>
 79:     <asp:RadioButtonList id="radlConditionalFormat" runat="server"
 80:       AutoPostBack="True"
 81:       OnSelectedIndexChanged="radlConditionalFormat_SelectedIndexChanged"
 82:       RepeatDirection="Horizontal">
 83:       <asp:ListItem Text="Condition1" Value="1" Selected="True" />
 84:       <asp:ListItem Text="Condition2" Value="2" />
 85:     </asp:RadioButtonList>

 

行91-107では、Panel内に条件１(Condition1)を選択したときに表示するWebコントロールを定義しています。行93-99では、DropDownListで比較演算子(EQ, GT, GE, LT, LE)を表示しています。行100では、単価を入力するTextBoxを定義しています。行101-106では、CompareValidatorで単価のデータ型をチェックしています。単価に通貨型以外のデータを入力したときは、エラーメッセージが表示されます。

 

91:     <asp:Panel id="panCondition1" runat="server" Visible="True">
 92:       Price is
 93:       <asp:DropDownList id="dropOperator" runat="server">
 94:         <asp:ListItem Text="=" Value="EQ" />

::::
 98:         <asp:ListItem Text="<=" Value="LE" />
 99:       </asp:DropDownList>
100:       <asp:TextBox id="txtValue" runat="server" />
101:       <asp:CompareValidator runat="server"
102:         ControlToValidate="txtValue"
103:         Display="Dynamic"
104:         Text="単価が不正です！ 半角数値を入力してください."
105:         Operator="DataTypeCheck"
106:         Type="Currency" />
107:     </asp:Panel>

 

行108-125では、Panel内に条件２(Condition2)を選択したときに表示するWebコントロールを定義しています。行108では、PanelのVisibleプロパティにFalseを設定していますので、Panel内に定義されているすべてのWebコントロールは表示されません。PanelのVisibleプロパティは、RadioButtonListのOnSelectedIndexChangedイベントで書き換えます。行110では、単価の最小値を入力するTextBoxを定義しています。行111-116では、CompareValidatorで単価のデータ型をチェックしています。最小値に通貨型以外のデータを入力したとき、エラーメッセージが表示されます。行118では、単価の最大値を入力するTextBoxを定義しています。行119-124では、CompareValidatorで単価のデータ型をチェックしています。最大値に通貨型以外のデータを入力したとき、エラーメッセージが表示されます。

 

108:     <asp:Panel id="panCondition2" runat="server" Visible="False">
109:       Price is between
110:       <asp:TextBox id="txtValue1" runat="server" />
111:       <asp:CompareValidator runat="server"
112:         ControlToValidate="txtValue1"
113:         Display="Dynamic"
114:         Text="単価が不正です！ 半角数値を入力してください."
115:         Operator="DataTypeCheck"
116:         Type="Currency" />
117:       and
118:       <asp:TextBox id="txtValue2" runat="server" />
119:       <asp:CompareValidator runat="server"
120:         ControlToValidate="txtValue2"
121:         Display="Dynamic"
122:         Text="単価が不正です！ 半角数値を入力してください."
123:         Operator="DataTypeCheck"
124:         Type="Currency" />
125:     </asp:Panel>

 

行130-132では、Filterボタンを定義しています。行132では、ButtonのOnClickイベントを登録しています。このイベントは、Filterボタンをクリックしたときに発生します。行133-136では、ReSetボタンを定義しています。行134では、CausesValidationプロパティにFalseを設定してReSetボタンをクリックしたときにCompareValidatorを無効にしています。CausesValidationにTrueを設定したときは、ReSetボタンをクリックしたときも単価のエラーチェックが実行されます。CausesValidationは、中止/閉じるボタンなどを定義するときに指定します。行136では、OnClickイベントを登録しています。このイベントは、ReSetボタンをクリックしたときに発生します。

 

130:     <asp:Button id="btnFilter" runat="server"
131:       Text="Filter"
132:       OnClick="btnFilter_Click" />
133:     <asp:Button id="btnReSet" runat="server"
134:       CausesValidation="False"
135:       Text="ReSet"
136:       OnClick="btnReSet_Click" />

 

Page_Load()イベントでは、ページが最初にロードされたときにSub BindData()を呼び出して、DataGridに商品テーブルをバインドします。BindData()の引数には、フィルタ条件を指定します。フィルタ条件を適用しないときは、空白("")を指定します。

 

7: Sub Page_Load()
  8:   If Not IsPostBack Then
  9:     BindData("")
 10:   End If
 11: End Sub

 

Sub BindData()では、商品テーブルのDataViewを生成してDataGridにバインドします。行20では、OleDbDataAdapterのFill()メソッドで商品テーブルをDataSetに格納しています。行21では、DataSetから商品テーブルのDataViewを生成しています。行22では、DataViewのRowFilterプロパティにフィルタ条件を設定してレコードを絞り込んでいます。フィルタ条件は、BindData()の引数として渡されます。行23-24では、DataGridのDataSourceプロパティにDataViewを設定してDataBind()メソッドでバインドしています。

 

13: Sub BindData(strCriteria As String)
       ::::
 20:   da.Fill(ds,"Products")
 21:   Dim dv As DataView = ds.Tables("Products").DefaultView
 22:   dv.Rowfilter = strCriteria
 23:   dgrdProducts.DataSource = dv
 24:   dgrdProducts.DataBind()
 25: End Sub

 

RadioButtonListからCondition1/Condition2を選択すると、OnSelectedIndexChangedイベントが発生します。このイベントでは、PanelのVisibleプロパティをTrue/Falseに書き換えてフィルタ条件を入力するWebコントロールを切り替えます。Condition1を選択したときは、比較演算子のDropDownListと単価のTextBoxを表示します。Condition2を選択したときは、単価の最小値/最大値を入力するTextBoxを表示します。

 

27: Sub radlConditionalFormat_SelectedIndexChanged(s As Object, e As EventArgs)
 28:   If radlConditionalFormat.SelectedItem.Text = "Condition1" Then
 29:     panCondition1.Visible = True
 30:     panCondition2.Visible = False
 31:   Else
 32:     panCondition1.Visible = False
 33:     panCondition2.Visible = True
 34:   End If
 35: End Sub

 

Filterボタンをクリックすると、OnClickイベントが発生します。このイベントでは、フィルタ条件式を生成してDataGridに表示するレコードを絞り込みます。行44-50は、Condition1を選択したときに実行されます。Select…End Selectでは、単価のフィルタ条件式を生成しています。とたえば、DropDownListから「=」を選択したときは、”UnitPrice = 9999”のような条件式が生成されます。行55は、Condition2を選択したときに実行されます。Condition2を選択したときは、”UnitPrice >= 9999 And UnitPrice <= 9999”のようなフィルタ条件式が生成されます。行57では、Sub BindData()を呼び出して商品テーブルにフィルタ条件を適用して結果を表示します。

 

37: Sub btnFilter_Click(s As Object, e As EventArgs)
 38:   Dim strCriteria As String = String.Empty
 40:   If radlConditionalFormat.SelectedItem.Text = "Condition1" Then
 44:     Select dropOperator.SelectedItem.Value
 45:       Case "EQ": strCriteria = "UnitPrice =  " & txtValue.Text.Trim()
 46:       Case "GT": strCriteria = "UnitPrice >  " & txtValue.Text.Trim()
 47:       Case "GE": strCriteria = "UnitPrice >= " & txtValue.Text.Trim()
 48:       Case "LT": strCriteria = "UnitPrice <  " & txtValue.Text.Trim()
 49:       Case "LE": strCriteria = "UnitPrice >= " & txtValue.Text.Trim()
 50:     End Select
 51:   Else
 55:     strCriteria = "UnitPrice >= " & txtValue1.Text.Trim() & " and UnitPrice <= " & txtValue2.Text.Trim()
 56:   End If
 57:   BindData(strCriteria)
 58: End Sub

 

ReSetボタンをクリックすると、OnClickイベントが発生します。このイベントの行61-63では、単価のTextBoxを空白(Empty)にしています。行64では、Sub BindData()を呼び出してDataGridに商品テーブルをバインドします。BindData()の引数に空白を指定すると、フィルタ条件が解除されて商品テーブルのすべてのレコードが表示されます。

 

60: Sub btnReSet_Click(s As Object, e As EventArgs)
 61:   txtValue.Text = String.Empty
 62:   txtValue1.Text = String.Empty
 63:   txtValue2.Text = String.Empty
 64:   BindData("")
 65: End Sub