DataGridの行を選択するには
● DataGridの行をマウスで選択するサンプル
図 DataGridの行をマウスで選択するサンプル
このサンプルは、DataGridの任意のカラムをクリックして行を選択します。DataGridにマウスを移動して任意の行をクリックすると、選択した行の背景色がピンクに変わります。さらに、選択した行の内容がDataGridの上位に表示れます。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridにLinkButtonを表示する方法
▲ Visibleプロパティを使用しないでLinkButtonを隠す方法
▲ DataGridの任意のカラムをクリックしたときにポストバックさせる方法
▲ GetPostBackClientHyperLink()メソッドの使い方
▲ 選択した行の背景色を変える方法
サンプルの行59-96では、DataGridを定義しています。行61では、DataGridにOnItemCommandイベントを登録しています。このイベントでは、選択した行の背景色を変えています。さらに、選択した行の内容をDataGridの上位に表示します。行62では、DataGridにOnItemDataBoundイベントを登録しています。このイベントでは、DataGridの行にOnClickイベントを登録してページをポストバックさせます。行71では、SelectedItemStyleのCssClassプロパティにCSSのクラス名dgrdSelectedItemStyleを設定しています。このクラスには、以下のようなCSSが定義されています。
.dgrdSelectedItemStyle
{
background-color: pink;
color: black;
font-size: x-small;
}
CSSのbackground-color: pinkは、背景色をピンクにすることを意味します。SelectedItemStyleは、DataGridのSelectedIndexプロパティに設定されている行に適用されます。
59: <asp:DataGrid id="dgrdCustomers"
runat="server"
::::
61:
OnItemCommand="dgrdCustomers_ItemCommand"
62: OnItemDataBound="dgrdCustomers_ItemDataBound"
::::
>
71: <SelectedItemStyle
CssClass="dgrdSelectedItemStyle" />
72: <Columns>
::::
95: </Columns>
96:
</asp:DataGrid>
行73-82のTemplateColumnでは、LinkButtonを表示しています。行76では、LinkButtonのCommandNameプロパティにSelectを設定していますので、ボタンをクリックするとOnItemCommandイベントが発生します。行77ではTextプロパティに空白、Widthプロパティに「0%」を設定していますので、LinkButtonが隠れた状態で表示されます。
73: <asp:TemplateColumn HeaderText="">
74:
<ItemTemplate>
75:
<asp:LinkButton id="lbtnSelect" runat="server"
76: CommandName="Select"
77:
Text="" Width="0%"
78:
Visible="True" />
79:
</ItemTemplate>
82:
</asp:TemplateColumn>
行83-87では、BoundColumnで得意先テーブルの得意先IDと得意先名をバインドしています。
83: <asp:BoundColumn
84:
DataField="CustomerID" HeaderText="ID"
85:
ItemStyle-HorizontalAlign="Right" />
86: <asp:BoundColumn
87:
DataField="CompanyName" HeaderText="得意先名" />
行88-94のTemplateColumnでは、得意先テーブルの担当者名と電話番号をバインドしています。
88: <asp:TemplateColumn
HeaderText="担当＆電話">
89:
<ItemTemplate>
90:
<asp:Label id="lblContactPhone" runat="server"
91:
Text='<%#
Container.DataItem("ContactName") & _
92:
" : " & Container.DataItem("Phone") %>' />
93:
</ItemTemplate>
94: </asp:TemplateColumn>
DataGridのDataSourceプロパティに得意先テーブルのDataViewを設定して、DataBind()メソッドでバインドするとOnItemDataBoundイベントが発生します。このイベントでは、DataGridの行にOnClickイベントを登録します。
行41-42は、ItemTypeがItem/AlternatingItemのときに実行されます。行41では、ItemのFindControl()メソッドでLinkButtonを検索しています。行42では、Attributes()メソッドで行にOnClickイベントを登録しています。OnClickイベントは、クライアント側で実行されます。DataGridの行にOnClickイベントを登録すると、任意のカラムをクリックしたときOnClickイベントが発生します。GetPostBackClientHyperLink()メソッドは、OnClickイベントが発生したときLinkButtonをクリックしたときと同じ動作をするJavaScriptを生成します。LinkButtonをクリックすると、DataGridのOnItemCommandイベントが発生しますので、行をクリックしたときも同様にOnItemCommandイベントが発生します。
37: Sub dgrdCustomers_ItemDataBound(s As Object, e
As DataGridItemEventArgs)
38: Dim lit As ListItemType =
e.Item.ItemType
39: If lit = ListItemType.Item
OrElse _
40: lit =
ListItemType.AlternatingItem Then
41: Dim lbtn
As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
42:
e.Item.Attributes("onClick") =
GetPostBackClientHyperlink(lbtn, "")
43: End If
44: End Sub
OnItemCommandイベントでは、選択した行の背景色をピンクに変えています。さらに、選択した行のデータをDataGridの上位に表示します。行26-33は、LinkButtonをクリックしたときのみ実行されます。DataGridの行をクリックしたときも、OnClickイベントが発生してLinkButtonをクリックしたときと同じ動作をします。行26では、Item.ItemIndexプロパティの値をDataGridのSelectedIndexプロパティに設定しています。これで、マウスでクリックした行が選択行になります。SlectedItemStyleでは、選択行の背景色をピンクに設定していますので
選択行の背景色がピンクに変わります。
行28では、DataGridから得意先IDを取得してLabelのTextプロパティに設定しています。行29では、LabelのTextプロパティにHTMLの<br>タグを追加しています。行30では、DataGridから得意先名を取得してLabelのTextプロパティに追加しています。行33では、DataGridから担当者名＋電話番号を取得してLabelのTextプロパティに追加しています。得意先IDと得意先名は、BoundColumnで表示していますのでSelectedItem.Cells(i).Textで値を取得することができます。担当者名＋電話番号は、TemplateColumnで表示していますのでFindControl()メソッドで検索して値を取得します。これで、Labelには選択行のデータが表示されます。
24: Sub dgrdCustomers_ItemCommand(s As Object, e As
DataGridCommandEventArgs)
25: If e.CommandName =
"Select" Then
26:
dgrdCustomers.SelectedIndex = e.Item.ItemIndex
28:
lblSelectedRow.Text =
dgrdCustomers.SelectedItem.Cells(1).Text
29: lblSelectedRow.Text
&= "<br>"
30: lblSelectedRow.Text
&= dgrdCustomers.SelectedItem.Cells(2).Text
31: lblSelectedRow.Text
&= "<br>"
33: lblSelectedRow.Text
&=
CType(dgrdCustomers.SelectedItem.FindControl("lblContactPhone"),
Label).Text
34: End If
35: End Sub
Tip
|
DataGrid上にマウスを移動したときにマウスの形状を変えるには DataGrid上にマウスを移動すると通常デフォルトの｜のカーソルが表示されます。デフォルトで表示されるカーソルの形状を変えるには、DataGridのOnItemDataBoundイベントでItem.Cells()のStyleにカーソルの形状を設定します。たとえば、カーソルを「手」の形状に切り替えるには、Style(“cursor”) = “hand”のように設定します。Styleのcursorプロパティには、auto、text、wait、helpなどが設定できます。 37: Sub dgrdCustomers_ItemDataBound(s As Object, e
As DataGridItemEventArgs) |
Tip
|
DataGrid上にマウスを移動したとき行の背景色を変えるには DataGrid上にマウスを移動したとき、行に背景色を変えると見やすくなります。マウスを移動したとき行に背景色を変えるには、DataGridのOnItemDataBoundイベントでクライアント側にて動作するonMouseover、onMouseoutイベントを登録します。クライアント側で動作するイベントは、Item.Attributes.Add()メソッドで登録します。Add()メソッドの引数には、イベント名とイベント処理を記述します。ここでは、イベント処理をJavaScriptで記述しています。OnMouseoverイベントでは、行の背景色をYellowに変えています。OnMouseoutイベントでは、行に背景色を元の状態(DarkGray/LightGray)に戻しています。カラーコード、#d3d3d3はLightGrayを意味します。 DataGridの行にイベントを登録するには、e.Item.Attributes.Add()のように記述します。DataGridのカラム（セル）にイベントを登録するには、e.Item.Cells(0).Attributes.Add()のように記述します。 37: Sub dgrdCustomers_ItemDataBound(s As Object, e
As DataGridItemEventArgs) |
Tip
|
IfステートメントでOrElse/AndAlsoを使用すると高速化できます このサンプルでは、ItemTypeを比較するときOrの代わりにOrElseを使用して高速化しています。例１のOrを使用したときは、Func1()関数からTrueが返されてもFunc2()関数が実行されます。例２のOrElseを使用したときは、Func1()関数からTrueが返されるとFunc2()関数を実行しませんので処理が高速化されます。Andも同様に、AndAlsoを使用した方が高速化できます。 例１： If Func1() Or Func2() Then ::: End If 例２： If Func1() OrElse Func2() Then :::: End If Function Func1() As Boolean Response.Write(“Func1()<br>”) Return True End Function Function Func2() As Boolean Response.Write(“Func2()<br>”) Return True End Function |