●DataGridの編集時、生産中止フラグをCheckBoxからチェック (ch64DataGrid2.aspx)
DataGridの編集時、生産中止フラグをテキストボックスに直接入力する代わりにCheckBoxをクリックするように操作性を改善します。
このサンプルでは、以下のノウハウを習得することができます。
▼DataGridの連結列をテンプレート列に変換する方法
▼テンプレート列のItemTemplateにCheckBoxコントロールを作成する方法
▼テンプレート列のEditItemTemplateにCheckBoxコントロールを作成する方法
▼CheckBoxコントロールのCheckedプロパティにデータ連結式を記述する方法
▼CheckBoxコントロールを更新不可にする方法
▼DataGridの編集行からCheckBoxの値を取得する方法
▼DataGridItemオブジェクトのFindControlメソッドの使い方
1. 連結列をテンプレート列に変換
DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[列]を選択します。「選択された列」から[生産中止]を選択します。画面最下位の[この列をテンプレート列に変換する]をクリックして連結列をテンプレート列に変換します。「選択された列」の[生産中止]が連結列からテンプレート列に変わります。[OK]をクリックして「プロパティビルダ」を閉じます。
図 プロパティビルダの[列]から連結列をテンプレート列に変換する
2. テンプレートの編集
DataGrid1の右クリックから[テンプレートの編集]→[Columns[2] – 生産中止]を選択します。「DataGrid1 – Columns[2] – 生産中止」のテンプレート編集が表示されたら、ItemTemplateのLabel1の右クリックから[削除]を選択して削除します。ツールボックスの[Webフォーム]からCheckBoxをドラッグしてItemTemplateにドロップします。ItemTemplateにCheckBox1のオブジェクトが作成されます。
図 ItemTemplateにCheckBoxをドラッグ＆ドロップする
CheckBox1のプロパティウィンドウから「(DataBindings)」プロパティを選択して
(iconEllipsis.gif)をクリックします。「CheckBox1データ連結」が表示されたら、「連結可能プロパティ」から[Checked]を選択します。「Checkedの連結」から[カスタム連結式]を選択して、テキストボックスに以下の連結式を入力します。
CType(Container.DataItem("DisContinued"), Boolean)
[OK]をクリックしてデータ連結ダイアログを閉じます。
図 CheckBox1のCheckedプロパティにカスタム連結式入力
CheckBox1の「Enabled」プロパティから[False]を選択します。
EditItemTemplateのLabel2の右クリックから[削除]を選択して削除します。ツールボックスの[Webフォーム]からCheckBoxをドラッグしてEditItemTemplateにドロップします。EditItemTemplateにCheckBox2のオブジェクトが作成されます。
図 EditItemTemplateにCheckBoxをドラッグ＆ドロップする
CheckBox2のプロパティウィンドウから「(DataBindings)」プロパティを選択して(iconEllipsis.gif)をクリックします。「CheckBox2データ連結」が表示されたら、「連結可能プロパティ」から[Checked]を選択します。「Checkedの連結」から[カスタム連結式]を選択して、テキストボックスに以下の連結式を入力します。
CType(Container.DataItem("DisContinued"), Boolean)
[OK]をクリックしてデータ連結ダイアログを閉じます。
図 CheckBox2のCheckedプロパティにカスタム連結式入力
テンプレート編集の右クリックから[テンプレート編集の終了]をクリックして終了します。
3. UpdateCommandイベントの書き換え
メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。DataGrid1_UpdateCommandイベントを以下のように書き換えます。
Private Sub DataGrid1_UpdateCommand(ByVal source As Object,
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Handles 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]を右クリックしてブラウザに表示します。DataGridにProducts表が表示されたら[編集]をクリックします。「商品」がテキストボックス、「生産中止」がチェックボックスに表示されます。[更新]をクリックすると、チェックボックスからクリックした生産中止フラグがProducts表に保存されます。
図 生産中止フラグのチェックボックスをクリックして選択
■解説
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] – 生産中止」のテンプレート編集が表示されたら、ItemTemplateのLabel1を削除してツールボックスからCheckBoxをドラッグ＆ドロップします。ItemTemplateにCheckBox1のオブジェクトが作成されたら、Checkedプロパティにカスタム連結式を記述します。CheckBox1のEnableプロパティには、Falseを設定して書き込みできないようにします。
同様の手順で、EditItemTemplateからTextBoxを削除したら、ツールボックスからCheckBoxをドラッグ＆ドロップします。EditItemTemplateにCheckBox2のオブジェクトが作成されたら、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_Load→DataGrid1_EditCommandの順にイベントが発生します。Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードのときBindGridメソッドを実行します。
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
If Not IsPostBack Then
BindGrid()
End If
End Sub
DataGrid1_EditCommandイベントでは、DataGridオブジェクトのEditItemIndexプロパティにカレントのアイテム番号を設定して、BindGridメソッドを実行します。BindGridメソッドを実行すると、DataGridにProducts表がバインドされて商品がTextBox、生産中止フラグがCheckBoxに表示されます。
Private Sub DataGrid1_EditCommand(ByVal source As Object,
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Handles DataGrid1.EditCommand
DataGrid1.EditItemIndex = e.Item.ItemIndex
BindGrid()
End Sub
CheckBoxから生産中止フラグをクリック（チェックマークを付ける）して[更新]をクリックすると、DataGrid1_UpdateCommandイベントが発生します。DataGrid1_UpdateCommandイベントでは、編集行のTextBoxから商品名、CheckBoxから生産中止フラグを取得して変数に保存します。
UpdateRecordメソッドを実行して、編集データをProducts表に反映します。DataGridオブジェクトのEditItemIndexプロパティに「-1」を設定して、BindGridメソッドを実行すると、編集行が通常行として表示されます。
Private Sub DataGrid1_UpdateCommand(ByVal source As Object,
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Handles 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