●DataGridの任意の列をクリックして行を選択する (ch65DataGrid2.aspx)
DataGridの[選択]をクリックする代わりに、任意の列をクリックして行を選択するできるように操作性を改善します。
このサンプルでは、以下のノウハウを習得することができます。
▼DataGridの任意の列をクリックして行を選択する方法
▼DataGridにマウスを移動したときに行をハイライトさせる方法
▼DataGridから任意の列をクリックしたときにポストバックさせる方法
▼DataGridのDataGridItemにクライアント側で動作するイベントを登録する方法
▼DataGridItemのAttributes.Addメソッドの使い方
1. 連結列の可視プロパティを書き換え
DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[列]を選択します。「選択された列」のリストボックスから[担当]を選択したら、[可視]をクリックしてチェックマークを付けます。同様に、[電話]を選択したら[可視]にチェックマークを付けます。
「選択された列」のリストボックスから[選択]を選択したら、[可視]をクリックしてチェックを外します。「ボタンの種類」から[LinkButton]を選択します。最後に、[OK]をクリックして「プロパティビルダ」を閉じます。
2. コードビューに切り替え
メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。Page_Loadイベントを以下のように書き換えます。
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
BindGrid()
Else
DataGrid1.Items(Me.SelectedIndex).Attributes.Add("onmouseover",
"this.style.backgroundColor='beige';this.style.cursor='hand'")
DataGrid1.Items(Me.SelectedIndex).Attributes.Add("onmouseout",
"this.style.backgroundColor='white';")
End If
End Sub
DataGrid1_SelectedIndexChangedイベントを以下のように書き換えます。
Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As Object,
ByVal e As System.EventArgs)
Handles DataGrid1.SelectedIndexChanged
Dim strCompanyName As String
Dim strContactName As String
Dim strPhone As String
Me.SelectedIndex = DataGrid1.SelectedIndex
With DataGrid1.SelectedItem
.Attributes.Item("onmouseover") = "this.style.cursor='hand'"
.Attributes.Remove("onmouseout")
strCompanyName = .Cells(0).Text
strContactName = .Cells(1).Text
strPhone = .Cells(2).Text
End With
Label1.Text = String.Format("{0}<br>{1}<br>{2}", _
strCompanyName, strContactName, strPhone)
End Sub
コードビュー左上の「クラス名」のドロップダウンリストから[DataGrid1]を選択します。右上の「メソッド名」のドロップダウンリストから[ItemCreated]を選択します。DataGrid1_ItemCreatedイベントが生成されたら、以下のコードを追加します。
Private Sub DataGrid1_ItemCreated(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
Handles DataGrid1.ItemCreated
If e.Item.ItemType = ListItemType.Item OrElse _
e.Item.ItemType = ListItemType.AlternatingItem OrElse _
e.Item.ItemType = ListItemType.SelectedItem Then
e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='beige';this.style.cursor='hand'")
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='white';")
e.Item.Attributes.Add("onclick", "javascript:__doPostBack('" &
"DataGrid1:" & "_ctl" & (e.Item.ItemIndex + 2) & ":_ctl0','')")
End If
End Sub
クラスモジュールの最後に、SelectedIndexプロパティを追加します。
Public Property SelectedIndex() As Integer
Get
Dim obj As Object = ViewState("SelectedIndex")
If obj Is Nothing Then
Return 0
End If
Return CType(obj, Integer)
End Get
Set(ByVal Value As Integer)
ViewState("SelectedIndex") = Value
End Set
End Property
3. ブラウザに表示
ソリューションエクスプローラから[ch65DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridにCustomers表が表示されたら、マウスをDataGrid上に移動します。マウスがポイントしている行の背景色が変わります。行の任意の列をクリックすると、選択行として表示されます。
図 DataGridの任意の列をクリックして行を選択
■解説
DataGridの任意の列をクリックして行を選択するには、DataGridのDataGridItemにクライアント側にて動作するonclickイベントを登録します。クライアント側で動作するイベントを登録するには、DataGridのItemCreatedイベントを利用します。
DataGridItemにonclickイベントを登録するには、DataGridItemのAttributesコレクションのAddメソッドを使用します。Addメソッドの引数には、イベント名と処理を記述します。
Private Sub DataGrid1_ItemCreated(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
Handles DataGrid1.ItemCreated
If e.Item.ItemType = ListItemType.Item OrElse _
e.Item.ItemType = ListItemType.AlternatingItem OrElse _
e.Item.ItemType = ListItemType.SelectedItem Then
e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='beige';this.style.cursor='hand'")
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='white';")
e.Item.Attributes.Add("onclick", "javascript:__doPostBack('" &
"DataGrid1:" & "_ctl" &
(e.Item.ItemIndex + 2) & ":_ctl0','')")
End If
End Sub
DataGridItemオブジェクトのAttributes.Addメソッドが実行されると、HTMLの<tr>タグにonclickイベントが追加されます。
<tr onmouseover="this.style.backgroundColor='beige';
this.style.cursor='hand'"
onmouseout="this.style.backgroundColor='white';"
onclick="javascript:__doPostBack('DataGrid1:_ctl2:_ctl0','')"
>
<td>喫茶たいむましん</td>
<td>林 千春</td>
<td>(0952)26-64XX</td>
</tr>
javascriptの__doPostBack関数は、DataGridに選択ボタン列(ButtonColumn)を作成すると自動的に生成されます。選択ボタン列のButtonTypeプロパティにPushButtonを設定すると、__doPostBackが生成されませんので、必ずLinkButtonを設定します。
<asp:DataGrid id="DataGrid1" runat="server"
AutoGenerateColumns="False">
<Columns>
・・・
<asp:ButtonColumn Visible="False"
Text="選択"
ButtonType="LinkButton"
CommandName="Select">
</asp:ButtonColumn>
</Columns>
</asp:DataGrid>
<script language="javascript" type="text/javascript">
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
theform = document.Form1;
}
else {
theform = document.forms["Form1"];
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
</script>