ASP.NET + Oracle Part3 のホームへ戻る

DataGridの任意の列をクリックして行を選択する (ch65DataGrid2.aspx)

 

DataGrid[選択]をクリックする代わりに、任意の列をクリックして行を選択するできるように操作性を改善します。

 

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

 

DataGridの任意の列をクリックして行を選択する方法

DataGridにマウスを移動したときに行をハイライトさせる方法

DataGridから任意の列をクリックしたときにポストバックさせる方法

DataGridDataGridItemにクライアント側で動作するイベントを登録する方法

DataGridItemAttributes.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",

ccc"this.style.backgroundColor='beige';this.style.cursor='hand'")

    DataGrid1.Items(Me.SelectedIndex).Attributes.Add("onmouseout",

ccc"this.style.backgroundColor='white';")

  End If

End Sub

 

DataGrid1_SelectedIndexChangedイベントを以下のように書き換えます。

 

Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As Object,

cccByVal e As System.EventArgs)

cccHandles 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,

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

cccHandles 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('" &

ccc"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]を右クリックしてブラウザに表示します。DataGridCustomers表が表示されたら、マウスをDataGrid上に移動します。マウスがポイントしている行の背景色が変わります。行の任意の列をクリックすると、選択行として表示されます。

 

fig6-5-3

DataGridの任意の列をクリックして行を選択

 

■解説

 

DataGridの任意の列をクリックして行を選択するには、DataGridDataGridItemにクライアント側にて動作するonclickイベントを登録します。クライアント側で動作するイベントを登録するには、DataGridItemCreatedイベントを利用します。

 

DataGridItemonclickイベントを登録するには、DataGridItemAttributesコレクションのAddメソッドを使用します。Addメソッドの引数には、イベント名と処理を記述します。

 

Private Sub DataGrid1_ItemCreated(ByVal sender As Object,

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

cccHandles 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('" &

ccc"DataGrid1:" & "_ctl" & (e.Item.ItemIndex + 2) & ":_ctl0','')")

  End If

End Sub

 

DataGridItemオブジェクトのAttributes.Addメソッドが実行されると、HTML<tr>タグにonclickイベントが追加されます。

 

<tr onmouseover="this.style.backgroundColor='beige';

cccthis.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>

 

ASP.NET + Oracle Part3 のホームへ戻る