Select row in GridView with JavaScript

Question

i've a few problem 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 Edit link, its will show up the edit AJAX popup panel, but how can i now, which row that being clicked? Any solution? Please help me.

Answer 1

Your question isn't very clear as to what you mean when you say you want the "row" so, here are 3 different ways to do the following:

1. Get the ID of the row
2. Get the Index of the row
3. Highlight the row on mouseover

With the above 3 ways, you should be able to pretty much figure out anything 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 posting is old, but I have a much simpler solution. Create your control using:

   <RowStyle CssClass="GridRow" />

somewhere inside the asp:GridView tags.

Then add the following in the page client script (I use jQuery)

$(document).ready(function () {
    $('.GridRow').click(ChangeSelectedRow);
});

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

Finally, in your style sheet define the style you want for GridSelectedRow. Something like the code shown below. The !important tag is needed to make sure it overrides the previous setting of background color.

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

Answer 3

You can add the Id as a parameter to be passed into ShowPopUpAdmin function to know which row is being clicked. Something along the lines of

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