Select Row in GridView Using JavaScript

Question

I have several problems with GridView in asp.net,

<asp:GridView ID="gridAdministrator" runat="server" AllowSorting="true" AutoGenerateColumns="false" AllowPaging="true" OnRowDeleting="gridAdministrator_RowDeleting" > <Columns> <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Phone" HeaderText="Phone" /> <asp:BoundField DataField="Address" HeaderText="Address" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:BoundField DataField="Mail" HeaderText="Mail" /> <asp:BoundField DataField="Password" HeaderText="Password" /> <asp:TemplateField> <ItemTemplate> <a href="#" onclick="ShowPopUpAdmin();">Edit</a> </ItemTemplate> </asp:TemplateField> <asp:CommandField ShowDeleteButton="true" /> </Columns> </asp:GridView> 

when I click the "Edit" link, an AJAX popup edit panel will appear, but how can I now, which line to click? Any solution? Please help me.

Answer 1

In your question, it’s not very clear what you mean when you say you want a “string” like this, here are 3 different ways to do the following:

• Get row id
• Get row index
• Highlight a line on hover

Using the above three methods, you can pretty much figure out what you are trying to do.

Here is the code:

Javascript

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".tbl tr:has(td)").css({ background: "ffffff" }).hover( function() { $(this).css({ background: "#C1DAD7" }); }, function() { $(this).css({ background: "#ffffff" }); } ); }); </script> 

HTML / ASPX

 <asp:GridView ID="gridAdministrator" CssClass="tbl" runat="server" AllowSorting="true" AutoGenerateColumns="false" AllowPaging="true" OnRowDeleting="gridAdministrator_RowDeleting" > <Columns> <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="true" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Phone" HeaderText="Phone" /> <asp:BoundField DataField="Address" HeaderText="Address" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:BoundField DataField="Mail" HeaderText="Mail" /> <asp:BoundField DataField="Password" HeaderText="Password" /> <asp:TemplateField> <ItemTemplate> <a href="#" onclick="ShowPopUpAdmin();">Edit</a> <a href="#" onclick="alert('<%# Eval("ID") %>');">Click to show ID</a><br /> <a href="#" onclick="alert('<%# Container.DataItemIndex %>');">Click to show Row Index</a> </ItemTemplate> </asp:TemplateField> <asp:CommandField ShowDeleteButton="true" /> </Columns> </asp:GridView> 

Answer 2

I know this post is outdated, but I have a much simpler solution. Create your control using:

  <RowStyle CssClass="GridRow" /> 

somewhere inside asp: GridView tags.

Then add the following to the client page of the script (I am using jQuery)

 $(document).ready(function () { $('.GridRow').click(ChangeSelectedRow); }); function ChangeSelectedRow(evt) { $('.GridRow').removeClass('GridSelectedRow'); $(this).addClass('GridSelectedRow'); } 

Finally, in your stylesheet, define the style you want for GridSelectedRow. Something like the code shown below. An important tag is needed to make sure that it overrides the previous background color settings.

 .GridSelectedRow { background-color: #E0F76F !important; } 

Answer 3

You can add Id as a parameter, which will be passed to the ShowPopUpAdmin function to find out which line is pressed. Something along the lines

 <asp:TemplateField> <ItemTemplate> <a href="#" onclick='ShowPopUpAdmin(Eval("Id"));'>Edit</a> </ItemTemplate> </asp:TemplateField>