ASP.NET DataGridのホームへ戻る

DataGridの複数行を一括して編集/更新するには

 

  DataGridの複数行を一括して編集/更新するサンプル

 

DataGridの複数行を一括して編集/更新するサンプル

 

このサンプルは、DataGridに表示されている複数行のレコードを一括して編集/更新することができます。DataGridTextBoxに表示されているデータを編集したら一括更新ボタンをクリックしてデータベースに書き込みます。DataGridのアイテムが変更されている行は、黄色の背景色で表示されます。

 

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

 

  DataGridTemplateColumnTextBoxを表示する方法

  DataGridのフッタにButtonを表示する方法

  DataGridのアイテムが変更されている行を黄色の背景色で表示する方法

  ArralyListAdd(), Clear(), TrimToSize()メソッドの使い方

  NamingContainerの使い方

 

サンプルの行96-139では、DataGridを定義しています。行103では、OnItemDataBoundイベントを登録しています。このイベントは、DataGridDataBind()メソッドを実行したときに発生します。行104では、OnItemCommandイベントを登録しています。このイベントは、フッタに配置されている一括更新ボタンをクリックしたときに発生します。行110-138<Columns>…</Columns>では、TemplateColumnで商品区分テーブルの商品区分IDと商品区分名をバインドしています。

 

96: <asp:DataGrid id="dgrdCategories" runat="server"
103:   OnItemDataBound="dgrdCategories_ItemDataBound"
104:   OnItemCommand="dgrdCategories_ItemCommand"
        :::: >
110:   <Columns>

::::
138:   </Columns>
139: </asp:DataGrid>

 

111-120では、TemplateColumnで商品区分IDをバインドしています。行112-115ItemTemplateでは、LabelTextプロパティに商品区分IDをバインドしています。行117-119FooterTemplateでは、LabelTextプロパティに「」を設定して表示しています。

 

111:     <asp:TemplateColumn HeaderText="ID">
112:       <ItemTemplate>
113:         <asp:Label id="lblCategoryID" runat="server"
114:           Text='<%# Container.DataItem("CategoryID") %>' />
115:       </ItemTemplate>
117:       <FooterTemplate>
118:         <asp:Label runat="server" Text="
" />
119:       </FooterTemplate>
120:     </asp:TemplateColumn>

 

121-137TemplateColumnでは、商品区分名をバインドしています。行122-128ItemTemplateでは、TextBoxTextプロパティに商品区分名をバインドしています。行124では、OnTextChangedイベントを登録しています。このイベントは、TextBoxのデータを変更してフォーカスを他のコントロールに移動したときに発生します。OnTextChangedイベントでは、変更されてたレコードの商品区分IDArrayListに格納します。行129-136FooterTemplateでは、Buttonで一括更新ボタンを表示しています。行131では、CommandNameプロパティにUpdateAllを設定しています。一括更新ボタンをクリックすると、DataGridOnItemCommandイベントが発生します。このイベントでは、CommandNameプロパティを参照してどのボタンがクリックされたかチェックして対応する処理を行います。

 

121:     <asp:TemplateColumn HeaderText="商品区分名">
122:       <ItemTemplate>
123:         <asp:TextBox id="txtCategoryName" runat="server"
124:           OnTextChanged="txtCategoryName_TextChanged"
125:           Text='<%# Container.DataItem("CategoryName") %>'
126:           CssClass="txtShadow"
127:           MaxLength="30" />
128:       </ItemTemplate>
129:       <FooterTemplate>
130:         <asp:Button id="btnUpdateAll" runat="server"
131:           CommandName="UpdateAll"
132:           Style="color:blue"
133:           Width="100%"
134:           ToolTip="
複数行を一括して更新します!"
135:           Text="
一括更新" />
136:       </FooterTemplate>
137:     </asp:TemplateColumn>

 

DataGridTextBoxに表示されている商品区分名を変更してフォーカスを移動するとOnTextChangedイベントが発生します。このイベントでは、ArrayListに変更されたレコードの商品区分IDを格納しています。ArrayListに格納された商品区分IDは、一括更新ボタンをクリックしたときに使用します。行82では、TextBoxNamingContainerからDataGridItemを取得しています。行83では、DataGridItemFindControl()メソッドで商品区分IDLabelを検索してTextプロパティの値を取得しています。行84-86では、ArrayListContains()メソッドで商品区分IDArrayListに格納されているか調べて、格納されていないときはAdd()メソッドで追加します。

 

81: Protected Sub txtCategoryName_TextChanged(s As Object, e As EventArgs)
 82:   Dim dgi As DataGridItem = CType(CType(s, Control).NamingContainer, DataGridItem)
 83:   Dim intCategoryID As Integer = Int32.Parse(CType(dgi.FindControl("lblCategoryID"), Label).Text)
 84:   If Not (marrCategoryList.Contains(intCategoryID)) Then
 85:     marrCategoryList.Add(intCategoryID)
 86:   End If
 87: End Sub

 

商品区分名が変更されているとき、TextBoxの背景色を黄色で表示するには、TextBoxOnChangeイベントを登録してJavaScriptで背景色を書き換えます。TextBoxにブラウザで実行されるイベントを登録するには、TextBoxAttributes.Add()メソッドを使用します。OnChangeイベントの登録は、DataGridOnItemDataBoundイベントで行います。行73では、ItemFindControl()メソッドでTextBoxを検索しています。行74-78では、TextBoxが見つかったか調べてOnChangeイベントを登録しています。OnItemDataBoundイベントは、DataGridのヘッダ、フッタにも適用されますので、FindControl()メソッドを実行したときはTextBoxが見つかったかチェックする必要があります。

 

72: Sub dgrdCategories_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 73:   Dim txtCategory As TextBox = e.Item.FindControl("txtCategoryName")
 74:   If Not (txtCategory Is Nothing) Then
 75:     With txtCategory
 76:       .Attributes.Add("onChange","this.style.backgroundColor='yellow'")

77:     End With
 78:   End If
 79: End Sub

 

DataGridから一括更新ボタンをクリックすると、OnItemCommandイベントが発生します。このイベントでは、ButtonCommandNameプロパティを参照してどのボタンがクリックされたかチェックしています。一括更新ボタンをクリックしたときは、Sub dgrdCategories_UpdateAll()を呼び出します。

 

35: Sub dgrdCategories_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 36:   If e.CommandName = "UpdateAll" Then
 37:     dgrdCategories_UpdateAll()
 38:   End If
 39: End Sub

 

Sub dgrdCategories_UpdateAll()では、変更されたレコードを一括してデータベースに反映します。行42-43では、SQLUpdateステートメントを生成しています。行44-45では、OleDbConnectionのインスタンスを生成しています。引数には、Web.configに登録されているデータベース接続情報を設定しています。

 

52-65For…Nextループでは、DataGridのアイテムを検索して変更されているレコードを見つけたらデータベースに書き込んでいます。行53では、DataGridItemFindControl()メソッドで商品区分IDLabelを検索してTextプロパティの値を取得しています。行54-64If..End Ifでは、ArrayListContains()メソッドで商品区分IDArralyListに格納されているか調べています。行55では、DataGridItemFindControl()メソッドで商品区分名のTextBoxを検索してTextプロパティから値を取得しています。行56-60では、OleDbCommandのインスタンスを生成してUpdateステートメントのパラメータに値を設定しています。行61-63では、OleDbCommandExecuteNonQuery()メソッドでUpdateステートメントを実行してデータベースに書き込んでいます。

 

66-67では、ArrayListClear()メソッドですべての要素を消去して、TrimToSize()メソッドでメモリの所要量を少なくしています。行68では、Sub LoadData()を呼び出して商品区分テーブルのレコードを抽出してDataSetに格納しています。行69では、Sub BindDataGrid()を呼び出して、DataSetからDataTableを生成してDataGridにバインドしています。これで、一括更新されたレコードがDataGrid上に再表示されます。

 

41: Sub dgrdCategories_UpdateAll()
 42:   Dim strSQL As String = "Update Categories Set CategoryName=@CategoryName " & _
 43:     "Where CategoryID=@CategoryID"
 44:   Dim con As New OleDbConnection( _
 45:     ConfigurationSettings.AppSettings("conStringNw"))
 46:   Dim cmd As OleDbCommand
 47:
 48:   Dim dgi As DataGridItem
 49:   Dim intCategoryID As Integer

50:   Dim strCategoryName As String
 51:
 52:   For Each dgi in dgrdCategories.Items
 53:     intCategoryID = Int32.Parse(CType(dgi.FindControl("lblCategoryID"), Label).Text)
 54:     If marrCategoryList.Contains(intCategoryID) Then
 55:       strCategoryName = CType(dgi.FindControl("txtCategoryName"), TextBox).Text
 56:       cmd = New OleDbCommand(strSQL, con)
 57:       With cmd.Parameters
 58:         .Add("@CategoryName",strCategoryName)
 59:         .Add("@CategoryID",intCategoryID)
 60:       End With
 61:       con.Open()
 62:       cmd.ExecuteNonQuery()
 63:       con.Close()
 64:     End If
 65:   Next
 66:   marrCategoryList.Clear()
 67:   marrCategoryList.TrimToSize()
 68:   LoadData()
 69:   BindDataGrid()
 70: End Sub

 

ASP.NET DataGridのホームへ戻る