DataGridの編集時、生産中止フラグをCheckBoxからチェック (ch64DataGrid2.aspx)

 

DataGridの編集時、生産中止フラグをテキストボックスに直接入力する代わりにCheckBoxをクリックするように操作性を改善します。

 

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

 

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

▼テンプレート列のItemTemplateCheckBoxコントロールを作成する方法

▼テンプレート列のEditItemTemplateCheckBoxコントロールを作成する方法

CheckBoxコントロールのCheckedプロパティにデータ連結式を記述する方法

CheckBoxコントロールを更新不可にする方法

DataGridの編集行からCheckBoxの値を取得する方法

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

 

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

 

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

 

fig6-4-2

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

 

2. テンプレートの編集

 

DataGrid1の右クリックから[テンプレートの編集][Columns[2] – 生産中止]を選択します。「DataGrid1 – Columns[2] – 生産中止」のテンプレート編集が表示されたら、ItemTemplateLabel1の右クリックから[削除]を選択して削除します。ツールボックスの[Webフォーム]からCheckBoxをドラッグしてItemTemplateにドロップします。ItemTemplateCheckBox1のオブジェクトが作成されます。

 

 

fig6-4-3

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

 

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

 

CType(Container.DataItem("DisContinued"), Boolean)

 

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

 

fig6-4-4

CheckBox1Checkedプロパティにカスタム連結式入力

 

CheckBox1の「Enabled」プロパティから[False]を選択します。

 

 

EditItemTemplateLabel2の右クリックから[削除]を選択して削除します。ツールボックスの[Webフォーム]からCheckBoxをドラッグしてEditItemTemplateにドロップします。EditItemTemplateCheckBox2のオブジェクトが作成されます。

 

 

fig6-4-5

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

 

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

 

CType(Container.DataItem("DisContinued"), Boolean)

 

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

 

fig6-4-6

CheckBox2Checkedプロパティにカスタム連結式入力

 

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

 

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

 

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

 

Private Sub DataGrid1_UpdateCommand(ByVal source As Object,

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

cccHandles DataGrid1.UpdateCommand

 

  Dim chkDisContinued As CheckBox = CType(e.Item.FindControl("CheckBox2"), CheckBox)

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

  Dim intDisContinued As Integer = IIf(chkDisContinued.Checked, 1, 0)

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

 

  UpdateRecord(strProductName, intDisContinued, intProductID)

  DataGrid1.EditItemIndex = -1

  BindGrid()

End Sub

 

4. ブラウザに表示

 

ソリューションエクスプローラから[ch64DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridProducts表が表示されたら[編集]をクリックします。「商品」がテキストボックス、「生産中止」がチェックボックスに表示されます。[更新]をクリックすると、チェックボックスからクリックした生産中止フラグがProducts表に保存されます。

 

fig6-4-7

生産中止フラグのチェックボックスをクリックして選択

 

■解説

 

DataGridの編集時に「生産中止」フラグをCheckBoxからセット/リセットできるようにするには、連結列をテプレート列に変換します。連結列をテンプレート列に変換するには、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.DisContinued") %>'>

        </asp:Label>

      </ItemTemplate>

      <EditItemTemplate>

        <asp:TextBox runat="server"

          Text='<%# DataBinder.Eval(Container, "DataItem.DisContinued") %>'>

        </asp:TextBox>

      </EditItemTemplate>

    </asp:TemplateColumn>

    ・・・

  </Columns>

</asp:DataGrid>

 

連結列をテンプレート列に変換したら、DataGrid1の右クリックから[テンプレートの編集]を選択します。

DataGrid1 – Columns[2] – 生産中止」のテンプレート編集が表示されたら、ItemTemplateLabel1を削除してツールボックスからCheckBoxをドラッグ&ドロップします。ItemTemplateCheckBox1のオブジェクトが作成されたら、Checkedプロパティにカスタム連結式を記述します。CheckBox1Enableプロパティには、Falseを設定して書き込みできないようにします。

 

同様の手順で、EditItemTemplateからTextBoxを削除したら、ツールボックスからCheckBoxをドラッグ&ドロップします。EditItemTemplateCheckBox2のオブジェクトが作成されたら、Checkedプロパティにカスタム連結式を記述します。テンプレート編集の右クリックから[テンプレート編集の終了]を選択して終了すると、以下のようなテンプレート列が生成されます。

 

<asp:TemplateColumn HeaderText="生産中止">

  <ItemTemplate>

    <asp:CheckBox id=CheckBox1 runat="server"

      Checked='<%# CType(Container.DataItem("DisContinued"), Boolean) %>'

      Enabled="False">

    </asp:CheckBox>

  </ItemTemplate>

  <EditItemTemplate>

    <asp:CheckBox id=CheckBox2 runat="server"

      Checked='<%# CType(Container.DataItem("DisContinued"), Boolean) %>'>

    </asp:CheckBox>

  </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

 

DataGrid1_EditCommandイベントでは、DataGridオブジェクトのEditItemIndexプロパティにカレントのアイテム番号を設定して、BindGridメソッドを実行します。BindGridメソッドを実行すると、DataGridProducts表がバインドされて商品がTextBox、生産中止フラグがCheckBoxに表示されます。

 

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

 

 

CheckBoxから生産中止フラグをクリック(チェックマークを付ける)して[更新]をクリックすると、DataGrid1_UpdateCommandイベントが発生します。DataGrid1_UpdateCommandイベントでは、編集行のTextBoxから商品名、CheckBoxから生産中止フラグを取得して変数に保存します。TextBoxのオブジェクトは、DataGridItemCellsコレクションのControlsコレクションから取得します。CheckBoxのオブジェクトは、DataGridItemFindControlメソッドを実行して取得します。FindControlメソッドの引数には、CheckBoxIDを指定します。

 

UpdateRecordメソッドを実行して、編集データをProducts表に反映します。DataGridオブジェクトのEditItemIndexプロパティに「-1」を設定して、BindGridメソッドを実行すると、編集行が通常行として表示されます。

 

Private Sub DataGrid1_UpdateCommand(ByVal source As Object,

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

cccHandles DataGrid1.UpdateCommand

 

  Dim chkDisContinued As CheckBox = CType(e.Item.FindControl("CheckBox2"), CheckBox)

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

  Dim intDisContinued As Integer = IIf(chkDisContinued.Checked, 1, 0)

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

 

  UpdateRecord(strProductName, intDisContinued, intProductID)

  DataGrid1.EditItemIndex = -1

  BindGrid()

End Sub