When we want to add Delete, Select functionality to a grid we normally proceed by adding a button for each action. By capturing the ID of the row in each action i.e. in Item Command or Row Command (2.0) we can complete the action.
The resulting grid will look like the following,

To make users more comfortable we can make the grid row selectable, so that we can get rid of Delete and Select button from the grid using Jscript. With this scenario in our mind, how we are going to get the selected row id in server side? I will explain this to achieve in a simpler way. So the resulting grid will look like,

we are using a Repeater control to do this task. Drag a Repeater control from the tool box and bind the repeater with whatever data you want to display. I am using “Products” table in NorthWind database in this example. The Repeater HTML will look like,

<asp:repeater id="rptrProducts" runat="server">
<HeaderTemplate>
<div><table BorderColor="Silver" border="0" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Id</font></STRONG>
</td>>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Name</font></STRONG>
</td><td  bgcolor="Maroon"><STRONG><font color="White">UnitPrice</font></STRONG> </td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id='<%#DataBinder.Eval(Container.DataItem, "ProductID")%>' >
<td  bgcolor=""  valign="top"><%#DataBinder.Eval(Container.DataItem,
"ProductID")%></td>
<td  bgcolor=""  valign="top"><%#DataBinder.Eval(Container.DataItem,
"ProductName")%></td>
<td  bgcolor=""  valign="top"><%#DataBinder.Eval(Container.DataItem,
"UnitPrice")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table></div>
</FooterTemplate>
</asp:repeater>

We are displaying three columns “ProductID”,”ProductName”,”UnitPrice”. Our target is when the user clicks a row, the repeater row should be highlighted so that it indicates the user the row has been selected as in the above diagram. I am going to do this with the help of Jscript. Before doing this we need to add some code in the above HTML for calling this Jscript function when the user clicks the Repeater Row. To make this happen I am adding an onClick event to the row in ItemTemplate of Repeater. So in the above HTML, I have made some small modification to call the Jscript function.

<ItemTemplate>
<tr id='<%#DataBinder.Eval(Container.DataItem, "ProductID")%>'
onclick='javascript:Repeater_selectRow(this, "<%#DataBinder.Eval(Container.DataItem,
"ProductID")%>",true);'
onmouseover='javascript:Repeater_mouseHover(this);' >
<td  bgcolor=""  valign="top"><%#DataBinder.Eval(Container.DataItem,
"ProductID")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem,

"ProductName")%></td>
<td  bgcolor=""  valign="top"><%#DataBinder.Eval(Container.DataItem,
"UnitPrice")%></td>
</tr>
</ItemTemplate>

In the above markup I have called one more Jscript function, onmouseover function that makes the mouse pointer to “hand” which indicates the user that the grid is selectable.Now, when the user clicks a row I need to capture the ID (ProductId in our case) of the row some where so that I can use this ID to do the required action on server side. I have done this using a Hidden Variable with “Runat=Server” attribute Add the following HTML for the hidden variable.

Now the implementation Repeater_selectRow() function will be like,

The Repeater_mouseHover(this); function will look like this,
function Repeater_mouseHover(row)
{
row.style.cursor = 'hand';
}