How to show panel on the click of linkbutton which is inside the Gridview

I want to show a panel on the click of a linkbutton which is located inside a grid开发者_Python百科view, Whether with javascript or codebehind.

This should work for you:

showPanel = function(this){
    var panel = document.getElementById("<%=pnlDetails.ClientID%>");
    if (panel){
        panel.style.display = "block";
    }
}

Since you're not doing anything with it, I don't think you need to pass in a reference to the LinkButton, either.

I will assume that Panel is an ASP Control named Panel, the <asp:panel ... one.

No mater where your control is (inside or outside the grid) the procedure is always the same, you will need to hook up the click event to the show/hide of that panel.

Working with Update Panels (so you avoid doing a total postback just to load part of your page) through out the year took me away from that approach and I today simply use the Show/Hide a div, for example:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="lnk" runat="server" Text="Click to open" OnClientClick="showPanel(this);" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:Panel ID="pnlDetails" runat="server" CssClass="panel" style="display:none;">
    <h2>
        This is a title</h2>
    <p>
        This is the description</p>
</asp:Panel>

<script type="text/javascript">
    function ShowPanel(elm) {
        alert('you have clicked me');
    }
</script>

every time you click in that link button, it will alert you.

the <asp:panel is converted to a simple <div> so it's easy to use that, you can simple verify if the <div> is already open, then close it, if closed, open it.

using jQuery to facilitate the handling and the writing of javascript you would make that ShowPanel function as:

<script type="text/javascript">
    var pnlId = '#<%= pnlDetails.ClientID %>';

    function ShowPanel(elm) {


        if ($(pnlId).is("visible"))
            $(pnlId).hide();
        else
            $(pnlId).show();
    }
</script>

you can use the variable elm (element) if you want to distinguish the link button row.