ASP.NET DataGridのホームへ戻る

DataGridに表示されていないフィールドを編集するには

 

  DataGridに表示されていないフィールドを編集するサンプル

 

DataGridに表示されていないフィールドを編集するサンプル

 

このサンプルは、DataGridの編集時カラムに表示されていないフィールドを編集することができます。DataGridの住所のカラムには、都道府県、住所1、住所2が表示されていますが、編集ボタンをクリックすると郵便番号、都道府県、住所1、住所2が編集モードで表示されます。

 

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

 

  DataGridTemplateColumnの使い方

  ItemTemplateで得意先テーブルの複数のフィールドを表示する方法

  EditItemTemplateで得意先テーブルの複数のフィールドを表示する方法

 

サンプルの行90-149では、DataGridを定義しています。行108-148<Columns>…</Columns>では、BoundColumnTemplateColumn, EditCommandColumnで得意先ID、得意先名、住所、編集ボタンを表示しています。

 

90: <asp:DataGrid id="dgrdCustomers" runat="server"
 96:   OnEditCommand="dgrdCustomers_EditCommand"
 97:   OnUpdateCommand="dgrdCustomers_UpdateCommand"
 98:   OnCancelCommand="dgrdCustomers_CancelCommand"
         :::: >
108:   <Columns>

::::
148:   </Columns>
149: </asp:DataGrid>

 

115-138では、TemplateColumnで住所を表示しています。行116-120ItemTemplateでは、得意先テーブルの都道府県、住所1、住所2をバインドしています。都道府県、住所1、住所2には、空白が挿入されます。空白を除去して表示するには、以下のように記述します。

 

<%# Container.DataItem("Ken") & Container.DataItem("Address1")  & Container.DataItem("Address2") %>

121-137EditItemTemplateでは、TextBoxに郵便番号、都道府県、住所1、住所2をバインドしています。郵便番号は、ItemTemplateにバインドされていません。郵便番号のようにItemTemplateにバインドされていないフィールドをEditItemTemplateにバインドすると、DataGridに表示されていないフィールドを編集することができます。

 

115:     <asp:TemplateColumn HeaderText="住所">
116:       <ItemTemplate>
117:         <%# Container.DataItem("Ken") %>
118:         <%# Container.DataItem("Address1") %>
119:         <%# Container.DataItem("Address2") %>
120:       </ItemTemplate>
121:       <EditItemTemplate>
122:         <asp:TextBox id="txtPostalCode" runat="server"
123:           Width="80px"
124:           Text='<%# Container.DataItem("PostalCode") %>' />
125:         <br>
126:         <asp:TextBox id="txtKen" runat="server"
127:           Width="80px"
128:           Text='<%# Container.DataItem("Ken") %>' />
129:         <br>
130:         <asp:TextBox id="txtAddress1" runat="server"
131:           Width="250px"
132:           Text='<%# Container.DataItem("Address1") %>' />
133:         <br>
134:         <asp:TextBox id="txtAddress2" runat="server"
135:           Width="250px"
136:           Text='<%# Container.DataItem("Address2") %>' />
137:       </EditItemTemplate>
138:     </asp:TemplateColumn>

 

DataGridから確定(更新)ボタンをクリックするとOnUpdateCommandイベントが発生します。このイベントでは、編集行から編集データを取得してSQLUpdateステートメントでデータベースに書き込んでいます。行45-48では、SQLUpdateステートメントを生成しています。行53では、DataGridDataKeysプロパティから主キー(CustomerID)の値を取得しています。行54-58では、DataGridの編集行から得意先名、郵便番号、都道府県、住所1、住所2の値を取得して変数に保存しています。得意先名は、BoundColumnでバインドしていますのでItem.Cells().Controls()TextBoxのコントロールを取得します。郵便番号、都道府県などは、TemplateColumnを使用してバインドしていますのでItem.FindControl()メソッドでTextBoxを検索します。行60-67With…End Withでは、Updateステートメントのパラメータに編集行から取得した値を設定しています。行69-71では、SQLUpdateステートメントを実行して得意先テーブルのレコードを更新しています。

 

44: Sub dgrdCustomers_UpdateCommand(s As Object, e As DataGridCommandEventArgs)

45:   Dim strSQL As String = "Update Customers Set CompanyName=@CustomerName," & _

46:     "PostalCode=@PostalCode, Ken=@Ken," & _

47:     "Address1=@Address1, Address2=@Address2 " & _

 48:     "Where CustomerID=@CustomerID"

       ::::

53:   Dim intCustomerID As Integer = dgrdCustomers.DataKeys(e.Item.ItemIndex)
 54:   Dim strCustomerName As String = CType(e.Item.Cells(1).Controls(0), TextBox).Text
 55:   Dim strPostalCode As String = CType(e.Item.FindControl("txtPostalCode"), TextBox).Text
 56:   Dim strKen As String = CType(e.Item.FindControl("txtKen"), TextBox).Text
 57:   Dim strAddress1 As String = CType(e.Item.FindControl("txtAddress1"), TextBox).Text
 58:   Dim strAddress2 As String = CType(e.Item.FindControl("txtAddress2"), TextBox).Text
       ::::
 60:   With cmd.Parameters
 61:     .Add("@CustomerName",strCustomerName)
 62:     .Add("@PostalCode",strPostalCode)
 63:     .Add("@Ken",strKen)
 64:     .Add("@Address1",strAddress1)
 65:     .Add("@Address2",strAddress2)
 66:     .Add("@CustomerID",intCustomerID)
 67:   End With
       ::::
 69:   con.Open()
 70:   cmd.ExecuteNonQuery()
 71:   con.Close()
       ::::

76: End Sub

 

ASP.NET DataGridのホームへ戻る