DataGridの編集時、出荷日をCalendarから選択 (ch63DataGrid2.aspx)

 

DataGridの編集時、出荷日をテキストボックスに直接入力する代わりにカレンダーから選択できるように操作性を改善します。

 

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

 

DataGridの編集行にCalendarを表示する方法

▼連結列をテンプレート列に変換する方法

▼テンプレートの編集からEditItemTemplateCalendarコントロールを作成する方法

CalendarコントロールのSelectedDateVisibleプロパティの使い方

Calendarコントロールからデフォルトの日付を選択する方法

DataGridの編集行からCalendarで選択した日付を取得する方法

DataGridItemオブジェクトのFindControlメソッドの使い方

 

 

1. 連結列をテンプレート列に変換

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[]を選択します。「選択された列」から[出荷日]を選択します。画面最下位の[この列をテンプレート列に変換する]をクリックして連結列をテンプレート列に変換します。「選択された列」の[出荷日]が連結列からテンプレート列に変わります。[OK]をクリックして「プロパティビルダ」を閉じます。

 

fig6-3-2

プロパティビルダの[]から連結列をテンプレート列に変換する

 

2. テンプレートの編集

 

DataGrid1の右クリックから[テンプレートの編集][Columns[2] – 出荷日]を選択します。「DataGrid1 – Columns[2] – 出荷日」のテンプレート編集が表示されたら、EditItemTemplateTextBoxの右クリックから[削除]を選択してTextBoxを削除します。ツールボックスの[Webフォーム]から、CalendarをドラッグしてEditItemTemplateにドロップします。

 

fig6-3-3

EditItemTemplateCalendarをドラッグ&ドロップする

 

 

Calendarの右クリックから[自動フォーマット]を選択します。「カレンダーの自動フォーマット」が表示されたら、「スキームの選択」から[シンプル]を選択します。[OK]をクリックしてダイアログを閉じます。

 

fig6-3-4

カレンダーの自動フォーマットから[シンプル]を選択する

 

プロパティウィンドウからCalendar1を選択したら、「(DataBindings)」プロパティを選択してiconEllipsis(iconEllipsis.gif)をクリックします。「Calendar1データ連結」が表示されたら、「連結可能プロパティ」から[SelectedDate]を選択します。[カスタム連結式]を選択したら、テキストボックスに以下の連結式を入力します。

 

Container.DataItem("ShippedDate")

 

同様の手順で、「連結可能プロパティ」から[VisibleDate]を選択します。[カスタム連結式]を選択したら、テキストボックスに以下の連結式を入力します。

 

Container.DataItem("ShippedDate")

 

最後に、[OK]をクリックして「データ連結」ダイアログを閉じます。

 

fig6-3-5

EditItemTemplateCalendarのプロパティ設定

 

テンプレート編集の右クリックから[テンプレート編集の終了]を選択して終了します。

 

3. UpdateCommandイベントの書き換え

 

メニューバーから[表示][コード]を選択してコードビューに切り替えます。DataGrid1_UpdateCommandイベントを以下のように書き換えます。

 

Private Sub DataGrid1_UpdateCommand(ByVal source As Object,

cccByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

cccHandles DataGrid1.UpdateCommand

 

  Dim calShippedDate As Calendar = CType(e.Item.FindControl("Calendar1"), Calendar)

  Dim strShipName As String = CType(e.Item.Cells(1).Controls(0), TextBox).Text

  Dim dtmShippedDate As DateTime = calShippedDate.SelectedDate

  Dim intOrderID As Integer = DataGrid1.DataKeys(e.Item.ItemIndex)

 

  UpdateRecord(strShipName, dtmShippedDate, intOrderID)

  DataGrid1.EditItemIndex = -1

  BindGrid()

End Sub

 

4. ブラウザに表示

 

ソリューションエクスプローラから[ch63DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridOrders表が表示されたら、[編集]をクリックします。出荷先はテキストボックスに表示されますが、出荷日がカレンダーに表示されます。[更新]をクリックすると、カレンダーから選択した出荷日がOrders表に保存されます。

 

fig6-3-6

出荷日をカレンダーから選択する

 

■解説

 

DataGridの編集時に「出荷日」をCalendarから選択できるようにするには、連結列をテンプレート列に変換します。連結列をテンプレート列に変換するには、DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[]を選択します。「選択された列」から[出荷日]を選択したら、画面最下位から[この列をテンプレート列に変換する]をクリックします。[OK]をクリックすると、以下のようなテンプレート列が生成されます。

 

<asp:DataGrid id="DataGrid1" runat="server"

  AutoGenerateColumns="False">

  <Columns>

    ・・・

    <asp:TemplateColumn HeaderText="出荷日">

      <ItemTemplate>

        <asp:Label runat="server"

          Text='<%# DataBinder.Eval(Container, "DataItem.ShippedDate", "{0:d}") %>'>

        </asp:Label>

      </ItemTemplate>

      <EditItemTemplate>

        <asp:TextBox runat="server"

          Text='<%# DataBinder.Eval(Container, "DataItem.ShippedDate", "{0:d}") %>'>

        </asp:TextBox>

      </EditItemTemplate>

    </asp:TemplateColumn>

    ・・・

  </Columns>

</asp:DataGrid>

 

DataGridの右クリックから[テンプレートの編集][Columns[2] – 出荷日]を選択します。「DataGrid1 – Columns[2] – 出荷日」のテンプレート編集が表示されたら、EditItemTemplateからTextBoxを削除してCalendarを作成します。プロパティウィンドウから[Calendar1]を選択したら、「(DataBindings)」プロパティから「Calendar1データ連結」を表示します。「連結可能プロパティ」から[SelectedDate][VisibleDate]を選択したら、カスタム連結式を入力して出荷日(ShippedDate)をバインドします。テンプレートの編集の右クリックから[テンプレート編集の終了]を選択すると、以下のようなテンプレート列が生成されます。

 

<asp:TemplateColumn HeaderText="出荷日">

  <ItemTemplate>

    <asp:Label id=Label1 runat="server"

      Text='<%# DataBinder.Eval(Container, "DataItem.ShippedDate", "{0:d}") %>'>

    </asp:Label>

  </ItemTemplate>

  <EditItemTemplate>

    <asp:Calendar id=Calendar1 runat="server"

      SelectedDate='<%# Container.DataItem("ShippedDate") %>'

      VisibleDate='<%# Container.DataItem("ShippedDate") %>'

      ・・・>

    </asp:Calendar>

  </EditItemTemplate>

</asp:TemplateColumn>

 

DataGridから[編集]をクリックすると、WebページがポストバックされてPage_LoadDataGrid1_EditCommandの順にイベントが発生します。Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードのときBindGridメソッドを実行します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid()

  End If

End Sub

 

BindGridメソッドは、CreateDataSetメソッドを実行してOrders表をDataSetに取り込みます。DataGridオブジェクトのDataSourceプロパティにDataSetオブジェクトを設定して、DataBindメソッドを実行してバインドします。

 

Private Sub BindGrid()

  With DataGrid1

    .DataSource = CreateDataSet("OrderPackage.GetOrders")

    .DataKeyField = "OrderID"

    .DataBind()

  End With

End Sub

 

DataGrid1_EditCommandイベントは、DataGridオブジェクトのEditItemIndexプロパティにカレントのアイテム番号を設定して、BindGridメソッドを実行します。BindGridメソッドがDataGridOrders表をバインドすると、Webページがポストバックされて出荷先がテキストボックス、出荷日がカレンダーに表示されます。このとき、[編集]ボタンは[更新][中止]ボタンに切り替わります。[更新]をクリックすると、Webページがポストバックされて、DataGrid1_UpdateCommandイベントが発生します。

 

Private Sub DataGrid1_EditCommand(ByVal source As Object,

cccByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

cccHandles DataGrid1.EditCommand

  DataGrid1.EditItemIndex = e.Item.ItemIndex

  BindGrid()

End Sub

 

DataGrid1_UpdateCommandイベントは、編集行から出荷日と出荷先を取得して変数に保存します。編集行から出荷日を取得するには、DataGridItemオブジェクトのFindControlメソッドを実行してCalendarコントロールを検索します。CalendarオブジェクトのSelectedDateプロパティから、選択した日付を取得します。出荷先は、TextBoxオブジェクトのTextプロパティから取得します。

 

UpdateRecordメソッドを実行してOrders表を更新します。UpdateRecordメソッドの引数には、出荷先、出荷日、受注IDを指定します。DataGridオブジェクトのEditItemIndexプロパティに「-1」を設定したら、BindGridメソッドを実行してOrders表をバインドします。DataGridの編集行が通常行として表示されます。

 

Private Sub DataGrid1_UpdateCommand(ByVal source As Object,

cccByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

cccHandles DataGrid1.UpdateCommand

  Dim calShippedDate As Calendar = CType(e.Item.FindControl("Calendar1"), Calendar)

  Dim strShipName As String = CType(e.Item.Cells(1).Controls(0), TextBox).Text

  Dim dtmShippedDate As DateTime = calShippedDate.SelectedDate

  Dim intOrderID As Integer = DataGrid1.DataKeys(e.Item.ItemIndex)

 

  UpdateRecord(strShipName, dtmShippedDate, intOrderID)

  DataGrid1.EditItemIndex = -1

  BindGrid()

End Sub