※この記事はかつて、わんくまBlogで書いていたものです。こちらに移行します
某コミュニティで、
・ASP.NET ・VB専用 ・GridView ・選択リンクなし ・行を選択できる方法
とあったので、サンプルを作ってみた。
ま、これぐらいなら、誰でも簡単にできるが、意外にもはまる人が多いので、初心者向けにサンプルを掲載しておきます。
ポイントは、JavaScriptのお力をお借りすることと、RowCreatedイベントの使い方ですね。
なお、実行サンプルは、
http://techbank.jp/NonSelectButton/
でお試し頂けます。
■Default.aspx
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function SelectedRow(rowNum, gridViewId)
{
__doPostBack(gridViewId, 'Select$' + rowNum);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="CategoryId" DataSourceID="SqlDataSource1" CellPadding="4"
ForeColor="#333333" GridLines="None">
<footerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />
<rowstyle backcolor="#EFF3FB" />
<Columns>
<asp:commandfield ShowSelectButton="True"></asp:commandfield>
<asp:templatefield HeaderText="Col1">
<itemtemplate>
<asp:Label ID="Category" runat="server" Text='<%# Eval("CategoryId") %>'></asp:Label>
</itemtemplate>
</asp:templatefield>
<asp:templatefield HeaderText="Col2">
<itemtemplate>
<asp:Label ID="CategoryName" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label>
</itemtemplate>
</asp:templatefield>
</Columns>
<pagerstyle backcolor="#2461BF" forecolor="White" horizontalalign="Center" />
<selectedrowstyle backcolor="#D1DDF1" font-bold="True" forecolor="#333333" />
<headerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />
<editrowstyle backcolor="#2461BF" />
<alternatingrowstyle backcolor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PublicSampleConnectionString %>"
SelectCommand="SELECT [CategoryId], [CategoryName] FROM [Category]">
</asp:SqlDataSource>
</form>
</body>
</html>
■Default.aspx.vb (VBの例ですが、C#でも考え方は同じです）
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub GridView1_RowCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowCreated
' 選択ボタンセルを非表示にする(Visible = False だと選択ボタン押下を裏で制御ができないため）
e.Row.Cells(0).Style.Add("display", "none")
' データ行ではない場合は、何もしない
If Not e.Row.RowType = DataControlRowType.DataRow Then
Exit Sub
End If
' 行をClickされた場合、JavaScriptを実行するよう設定する
Dim clickEvent As String = _
String.Format("SelectedRow('{0}', '{1}')", _
e.Row.RowIndex, _
Me.GridView1.ClientID)
e.Row.Attributes.Add("onClick", clickEvent)
' 行のカーソルを手のマークにする
e.Row.Style.Add("cursor", "hand")
End Sub
Protected Sub GridView1_SelectedIndexChanging(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewSelectEventArgs) _
Handles GridView1.SelectedIndexChanging
' 行が選択された時の処理を書く
End Sub
Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles GridView1.PageIndexChanged
' 行が選択された後の処理を書く
End Sub
End Class
ポイントは、JavaScriptの__doPostBack に何を渡すか？です。
そして、最低限、選択した行の行番号が__doPostBackには欲しいはずなので、GridViewのRowCreatedイベントを使って、
__doPostBackの引数を生成してしまいます。（そうするとRowCrreatedイベントで行番号が取得できるので・・・）
結構、このネタ、参照している方が非常に多かったので、今後もtechbank.jpの方で掲載しておきます。
ご参考までに。