How do I get the selected row in Gridview in Javascript or JQuery

Question

Let me elaborate ... below is my partial gridview with a button field ... what I want is the text value of the button to use in building a url:

<asp:GridView CssClass="gridUser" ID="UsersGrid" ClientIDMode="Static" runat="server" AllowPaging="true" AllowSorting="true" PageSize="5" OnPageIndexChanging="PageIndexChange" OnRowCommand="Paging" OnSorting="SortPage" OnRowCreated="RowCreated"
                AutoGenerateColumns="false">

                <PagerSettings Mode="NextPreviousFirstLast" FirstPageImageUrl="~/Images/Navigation/firstpageIcon.png" LastPageImageUrl="~/Images/Navigation/lastpageIcon.png"
                    NextPageImageUrl="~/Images/Navigation/forwardOneIcon.png" PreviousPageImageUrl="~/Images/Navigation/backOneIcon.png" Position="Bottom" />

                <Columns>
                    <asp:TemplateField HeaderText="User Name" HeaderStyle-CssClass="gridHeader">
                        <ItemTemplate>
                           <asp:Button ID="UserLink" ClientIDMode="Static" runat="server" Text='<%#Eval("UserName") %>' CssClass="linkButton" OnClientClick = "return GetSelectedRow(this)"></asp:Button>
                    </ItemTemplate>
                        </asp:TemplateField>

and here is my javascript :

 $(".linkButton").click(function () {
        var ul = document.getElementById('UserLink');
        var row = ul.parentNode.parentNode;
        var rowIndex = row.rowIndex - 1;
        var Userid = row.cells[0].childNodes[1].value;
        var User = Userid;
        alert("Row is : " + row + "RowIndex is : " + rowIndex + "User ID is " + User);
    });

My issue is that my row returned is the first row ... not the selected row ... how do I get the selected row? Thank you for any assistance.

Vikram · Accepted Answer · 2015-06-01 17:53:51Z

6

Try this... Change naming conventions according to your requirement

<script type = "text/javascript">
        function GetSelectedRow(UserLink) {
            var row = UserLink.parentNode.parentNode;
            var rowIndex = row.rowIndex - 1;
            var Userid = row.cells[0].innerHTML;
            alert("RowIndex: " + rowIndex + " Userid : " + Userid + ");
            return false;
        }
    </script>

answered Jun 1, 2015 at 17:53

Vikram

2152 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul T. Rykiel Over a year ago

Thank you this will work, but I need it to work inside of the Document.ready object ... it will not be recognized inside of document ready.

Community · Accepted Answer · 2017-04-12 07:31:24Z

1

Your first problem is that in your button template column you are using an Id=UserLink which will get repeated for each row. Your element id's should be unique. See this answer for more details.

Your second problem is that document.getElementById('UserLink'); will actually find the first element with the id of UserLink which is always going to be the first row. In your case you can us var ul = this; and that should give you the button that was actually clicked.

To summarize:

I would suggest getting ride of the id on your button or make them unique.
Change document.getElementById('UserLink') to this and that will get you the button that was clicked.

edited Apr 12, 2017 at 7:31

CommunityBot

11 silver badge

answered Jun 1, 2015 at 17:48

Jared

2,8261 gold badge20 silver badges23 bronze badges

4 Comments

Paul T. Rykiel Over a year ago

this works, but when I change "document.getElementbyId(this) ... my var is null, eventhough this is showing the correct linkbutton. ... I am think I am close to my answer. Thank you

Paul T. Rykiel Over a year ago

so, I took out the document.getElementbyId(this) to var ul = this; works great!! Thank you so much for your assistance.

Jared Over a year ago

Let me clarify. Don't use document.getElementById(this) use var ul = this;.

Jared Over a year ago

@PaulT.Rykiel, no problem. If you can mark it as the answer so that others may reference it that would be great.

Collectives™ on Stack Overflow

How do I get the selected row in Gridview in Javascript or JQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related