How can I make an onclick handler with a row index as parameter, on a DataView Grid row in asp.net?

Question

I have an ASP.net dataview grid, and I want that each row should have a function written with onclick property and cursor pointer.

When the file is compiled and then opened in a browser, the rows should look like this:

<tr onclick = 'update( 1 )'>
<td>..... </td>

</tr>

<tr onclick = 'update ( 2 )' 
<td>..... </td>

</tr>

etc.

Answer 1

You can do it in the RowDataBound event of the Gridview.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onclick", "javascript:alert('Hello');");
        e.Row.Style.Add("cursor", "pointer");         
    }
}

Answer 2

Instead, why cant u write the required functionality in SelectedIndexChanged() event of the datagridview? And also you can give set the style of the selected index like this

<SelectedItemStyle Font-Size="10px" Font-Names="Verdana" HorizontalAlign="Left" ForeColor="Black" VerticalAlign="Middle" BackColor="Gold"></SelectedItemStyle>

Answer 3

You can access the tr using e.Row and the index using e.Row.RowIndex in the RowDataBound event. The bound data is accessible using e.Row.DataItem in case you want to access the real Id of the object or the old values.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow )
    {            
        var theItem = e.Row.DataItem as MyItemType;
        e.Row.Attributes.Add("onclick","update('" + e.Row.RowIndex + "')");
        e.Row.Style.Add("cursor", "pointer"); 
    }
}

Index starts at 0 for the row collection, so in case you want index to start at 1 you need to add 1 to RowIndex.

Answer 4

this onclick event.. is this to point to a custom javascript function? meaning... is update(1) a client side javascript function?

I you are looking to perform some server side operation when a row of the datagridview is clicked.. this is the method...

1. add a select command column to the datagridview: This will enable the user to select a row.
2. Write whatever you want done in the onSelectedIndexChanged event handler of the datagridview.

Following is the aspx of the gridview.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="Id" DataSourceID="SqlDataSource1" 
    EmptyDataText="There are no data records to display." BackColor="White" 
    BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" 
    ForeColor="Black" GridLines="Vertical" 
    onselectedindexchanged="GridView1_SelectedIndexChanged">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 
            SortExpression="Id" />
        <asp:BoundField DataField="UserId" HeaderText="UserId" 
            SortExpression="UserId" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
    </Columns>
    <FooterStyle BackColor="#CCCCCC" />
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView>

Pay attention to the in the columns tag

Your event handler will be like... protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { //Write whatever you want here }