ASP.NET DataGridのホームへ戻る

DataGridの行を選択するには

 

  DataGridの行をマウスで選択するサンプル

DataGridの行をマウスで選択するサンプル

 

このサンプルは、DataGridの任意のカラムをクリックして行を選択します。DataGridにマウスを移動して任意の行をクリックすると、選択した行の背景色がピンクに変わります。さらに、選択した行の内容がDataGridの上位に表示れます。

 

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

 

  DataGridLinkButtonを表示する方法

  Visibleプロパティを使用しないでLinkButtonを隠す方法

  DataGridの任意のカラムをクリックしたときにポストバックさせる方法

  GetPostBackClientHyperLink()メソッドの使い方

  選択した行の背景色を変える方法

 

サンプルの行59-96では、DataGridを定義しています。行61では、DataGridOnItemCommandイベントを登録しています。このイベントでは、選択した行の背景色を変えています。さらに、選択した行の内容をDataGridの上位に表示します。行62では、DataGridOnItemDataBoundイベントを登録しています。このイベントでは、DataGridの行にOnClickイベントを登録してページをポストバックさせます。行71では、SelectedItemStyleCssClassプロパティにCSSのクラス名dgrdSelectedItemStyleを設定しています。このクラスには、以下のようなCSSが定義されています。

 

.dgrdSelectedItemStyle

{

background-color: pink;

color: black;

font-size: x-small;

}

 

CSSbackground-color: pinkは、背景色をピンクにすることを意味します。SelectedItemStyleは、DataGridSelectedIndexプロパティに設定されている行に適用されます。

 

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-82TemplateColumnでは、LinkButtonを表示しています。行76では、LinkButtonCommandNameプロパティに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-94TemplateColumnでは、得意先テーブルの担当者名と電話番号をバインドしています。


 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>

DataGridDataSourceプロパティに得意先テーブルのDataViewを設定して、DataBind()メソッドでバインドするとOnItemDataBoundイベントが発生します。このイベントでは、DataGridの行にOnClickイベントを登録します。

 

41-42は、ItemTypeItem/AlternatingItemのときに実行されます。行41では、ItemFindControl()メソッドでLinkButtonを検索しています。行42では、Attributes()メソッドで行にOnClickイベントを登録しています。OnClickイベントは、クライアント側で実行されます。DataGridの行にOnClickイベントを登録すると、任意のカラムをクリックしたときOnClickイベントが発生します。GetPostBackClientHyperLink()メソッドは、OnClickイベントが発生したときLinkButtonをクリックしたときと同じ動作をするJavaScriptを生成します。LinkButtonをクリックすると、DataGridOnItemCommandイベントが発生しますので、行をクリックしたときも同様に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プロパティの値をDataGridSelectedIndexプロパティに設定しています。これで、マウスでクリックした行が選択行になります。SlectedItemStyleでは、選択行の背景色をピンクに設定していますので

選択行の背景色がピンクに変わります。

 

28では、DataGridから得意先IDを取得してLabelTextプロパティに設定しています。行29では、LabelTextプロパティにHTML<br>タグを追加しています。行30では、DataGridから得意先名を取得してLabelTextプロパティに追加しています。行33では、DataGridから担当者名+電話番号を取得してLabelTextプロパティに追加しています。得意先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上にマウスを移動すると通常デフォルトの|のカーソルが表示されます。デフォルトで表示されるカーソルの形状を変えるには、DataGridOnItemDataBoundイベントでItem.Cells()Styleにカーソルの形状を設定します。たとえば、カーソルを「手」の形状に切り替えるには、Style(“cursor”) = “hand”のように設定します。Stylecursorプロパティには、autotextwaithelpなどが設定できます。

 

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
 44:       e.Item.Cells(1).Style("cursor") = "hand"
 45:       e.Item.Cells(2).Style("cursor") = "hand"
 46:       e.Item.Cells(3).Style("cursor") = "hand"
 54:    End If
 55: End Sub

 

 

Tip

DataGrid上にマウスを移動したとき行の背景色を変えるには

 

DataGrid上にマウスを移動したとき、行に背景色を変えると見やすくなります。マウスを移動したとき行に背景色を変えるには、DataGridOnItemDataBoundイベントでクライアント側にて動作するonMouseoveronMouseoutイベントを登録します。クライアント側で動作するイベントは、Item.Attributes.Add()メソッドで登録します。Add()メソッドの引数には、イベント名とイベント処理を記述します。ここでは、イベント処理をJavaScriptで記述しています。OnMouseoverイベントでは、行の背景色をYellowに変えています。OnMouseoutイベントでは、行に背景色を元の状態(DarkGray/LightGray)に戻しています。カラーコード、#d3d3d3LightGrayを意味します。

 

DataGridの行にイベントを登録するには、e.Item.Attributes.Add()のように記述します。DataGridのカラム(セル)にイベントを登録するには、e.Item.Cells(0).Attributes.Add()のように記述します。

 

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
 48:       e.Item.Attributes.Add("onMouseover", "this.style.backgroundColor='Yellow'")
 49:       If lit = ListItemType.Item
 50:         e.Item.Attributes.Add("onMouseout", "this.style.backgroundColor='DarkGray'")
 51:       Else
 52:         e.Item.Attributes.Add("onMouseout", "this.style.backgroundColor='#d3d3d3'")
 53:       End If
 54:    End If
 55: End Sub

 

 

Tip

IfステートメントでOrElse/AndAlsoを使用すると高速化できます

 

このサンプルでは、ItemTypeを比較するときOrの代わりにOrElseを使用して高速化しています。例1のOrを使用したときは、Func1()関数からTrueが返されてもFunc2()関数が実行されます。例2のOrElseを使用したときは、Func1()関数からTrueが返されるとFunc2()関数を実行しませんので処理が高速化されます。Andも同様に、AndAlsoを使用した方が高速化できます。

 

例1:

If Func1() Or Func2() Then

  :::

End If

 

例2:

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

 

ASP.NET DataGridのホームへ戻る