jQuery click gridview row in master page

Question

I have been trying to figure out how to allow the user to click a row in a gridview in a master page. Ultimately I want the user to be redirected to another page with a values from the gridview (hiddenfield column) to be the querystring value of the page redirected to.

A this point I can only get to the gridview itself. I cannot get the row or the cell from the gridview.

    <script type="text/javascript">
    $(document).ready(function () {
        $('[id$=LeagueGV]').click(function() { alert('gridview  clicked'); });
        //window.location = "/League_Admin.aspx?LID=" + $(this).find('LeagueHidden').value();
        //});
    });
</script>

<asp:GridView runat="server" ID="LeagueGV" DataKeyNames="LeagueID" >
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:HiddenField runat="server" ID="LeagueHidden" Value='<%# Eval("LeagueID") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="LeagueIDLabel" Text='<%#Eval("LeagueID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="LeagueName" HeaderText="League Name" />
            </Columns>
        </asp:GridView>

Cᴏʀʏ · Accepted Answer · 2011-04-02 20:55:39Z

2

There's a couple problems with what you have. First off, your GridView's ID won't be rendered as "LeagueGV", nor will the hidden field be "LeagueHidden". It will be mangled to be part of a chain of its parent NamingContainer's IDs.

Secondly, jQuery syntax for using IDs can be as simple as $('#yourId'). The syntax you're using is old.

Thirdly, I wouldn't recommend adding a click event to a table or a tr. It's not an expected behavior by many users and could be confusing.

Unless you're hoping for unobtrusive Javascript, my first suggestion would be to have an HyperLinkField instead of a TemplateField, then you could override the OnDataBound event for the GridView and add an onclick attribute to the link when it renders that includes the LeagueID.

answered Apr 2, 2011 at 20:55

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

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

3 Comments

IMAbev Over a year ago

Thanks Cory. The Gridview is not rendered as "LeagueGV" but the above jQuery does find the gv. But more importantly it's interesting you say 'it's an unexpected event'. I never really thought of it and web ui is certainly not my strong point. I have a clickable gridivew in another project that I hack together with rowdatabound to make it 'clickable' and I was trying to expand on it. Clearly a hyperlink makes things a lot easier.

IMAbev Over a year ago

update - $('#LeagueGV') does not find the gridview in the content of the master page. The above syntax was the only way I could find the gv in the master page.

Cᴏʀʏ Over a year ago

You're right -- your syntax means: find all elements whose IDs end with "LeagueGV", which would work better than what I suggested. Also, having a row being clickable isn't necessarily a bad thing, you just have to make it's supported by the browsers you're targeting. And you might want to give users hints that it's clickable, such as changing the cursor to be the hand and highlighting the row on hover.

Collectives™ on Stack Overflow

jQuery click gridview row in master page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related