CODEWITHSUNDEEP
c#javascriptasp.netgridview
Muhammad Atif Agha
Muhammad Atif Agha

Reputation: 1545

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

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.

Upvotes: 0

Views: 2974

Answers (4)

Muhammad Akhtar
Muhammad Akhtar

Reputation: 52241

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");         
    }
}

Upvotes: 1

PHeiberg
PHeiberg

Reputation: 29811

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.

Upvotes: 0

Heshan Perera
Heshan Perera

Reputation: 4630

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 }

Upvotes: 0

Sai Kalyan Kumar Akshinthala
Sai Kalyan Kumar Akshinthala

Reputation: 11844

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>

Upvotes: 0

Related Questions