DataGridの編集時Calendarから選択するには

 

●  DataGridの編集時Calendarから選択するサンプル

 

図 DataGridの編集時Calendarから選択するサンプル

 

このサンプルは、DataGridから受注テーブルを編集するとき出荷日をCalendarから選択して変更します。TextBoxに出荷日を直接入力する代わりに、Calendarから日付を選択するように設計すると使い勝手のよいWebアプリケーションを構築することができます。

 

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

 

▲  DataGridのTemplateColumnの使い方

▲  EditItemTemplateにCalendarを表示する方法

▲  Calendarにデフォルトの日付を表示する方法

▲  CalendarのVisibleDateプロパティの使い方

▲  CalendarのSelectedDateプロパティの使い方

 

サンプルの行80-125では、DataGridを定義しています。行86では、OnEditCommandイベントを登録しています。このイベントは、DataGridから編集ボタンをクリックすると発生します。行87-88では、OnUpdateCommandとOnCancelCommandイベントを登録しています。これらのイベントは、編集行から確定（更新）ボタン、中止ボタンをクリックしたときに発生します。行96-124の<Columns>…</Columns>では、BoundColumn、TemplateColumn、EditCommandColumnで受注テーブルの受注ID、出荷先、出荷日と編集ボタンを表示しています。

 

80: <asp:DataGrid id="dgrdOrders" runat="server"

::::
 86:   OnEditCommand="dgrdOrders_EditCommand"
 87:   OnUpdateCommand="dgrdOrders_UpdateCommand"
 88:   OnCancelCommand="dgrdOrders_CancelCommand"
       :::: >
 96:   <Columns>

::::
124:   </Columns>
125: </asp:DataGrid>

 

行103-115のTemplateColumnでは、出荷日を表示しています。行104-106のItemTemplateでは、受注テーブルの出荷日のフィールドをバインドして表示しています。行107-114のEditItemTemplateでは、Calendarを表示しています。行111-112では、CalendarのVisibleDate、SelectedDateプロパティに出荷日のフィールドをバインドしています。これで、Calendarには、受注テーブルの出荷日が選択した状態で表示されます。

 

103:     <asp:TemplateColumn HeaderText="出荷日">
104:       <ItemTemplate>
105:         <%# DataBinder.Eval(Container.DataItem, "ShippedDate", "{0:d}") %>                                  
106:       </ItemTemplate>
107:       <EditItemTemplate>
108:         <asp:Calendar id="calShippedDate" runat="server"
109:           BackColor="White" ForeColor="Black" Font-Size="11px"
110:           DayHeaderStyle-Font-Bold="True"
111:           VisibleDate='<%# Container.DataItem("ShippedDate") %>'
112:           SelectedDate='<%# Container.DataItem("ShippedDate") %>' />
113:       </EditItemTemplate>
114:     </asp:TemplateColumn>
115:     <asp:EditCommandColumn

 

 

Page_Load()イベントでは、Sub LoadData()を呼び出して受注テーブルをDataSetに格納します。ページが最初にロードされたときは、Sub BindDataGrid()を呼び出して、DataGridに受注テーブルをバインドしています。

 

  8: Sub Page_Load()
  9:   LoadData()
 10:   If Not IsPostBack Then
 11:     BindDataGrid()
 12:   End If
 13: End Sub

 

DataGridから編集ボタンをクリックすると、OnEditCommandイベントが発生します。このイベントでは、編集ボタンをクリックした行を編集モードに切り替えています。

 

39: Sub dgrdOrders_EditCommand(s As Object, e As DataGridCommandEventArgs)
 40:   dgrdOrders.EditItemIndex = e.Item.ItemIndex
 41:   BindDataGrid()
 42: End Sub

 

編集行から確定（更新）ボタンをクリックすると、OnUpdateCommandイベントが発生します。このイベントでは、Calendarから選択した日付を取得して受注テーブルの出荷日を更新しています。行50では、DataGridのDataKeysプロパティから主キー(OrderID)の値を取得しています。行51-52では、FindControl()メソッドでCalendarを検索してSelectedDateプロパティから、選択した日付を取得しています。ToString(“d”)メソッドは、日付をyyyy/mm/ddの形式に変換します。

 

行54-57のWith…End Withでは、SQLのUpdateステートメントのパラメータ値を設定しています。行59-61では、OleDbCommandのExecuteNonQuery()メソッドでUpdateステートメントを実行して受注テーブルのレコードを更新しています。

 

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

::::
 50:   Dim intOrderID As Integer = dgrdOrders.DataKeys(e.Item.ItemIndex)
 51:   Dim calShippedDate As Calendar = CType(e.Item.FindControl("calShippedDate"), Calendar)
 52:   Dim strShippedDate As String = calShippedDate.SelectedDate.ToString("d")
       ::::
 54:   With cmd.Parameters
 55:     .Add("@ShippedDate",strShippedDate)
 56:     .Add("@OrderID",intOrderID)
 57:   End With
       ::::
 59:   con.Open()
 60:   cmd.ExecuteNonQuery()
 61:   con.Close()
       ::::
 66: End Sub