Setting id to a panel control in gridview

Question

I have a panel control in gridview's template.
I need to hide/unhide panel in javascript function, for that i need to pass panel's id to the javascript.

The problem is that all panels have the same id in gridview, so I need to set unique id to each panel.
I tried to do:

<asp:Panel id= "Panel_<%# Eval("ID")%>"

and some other variations but always get an error.

The panel contains some other controls, I need it to be server side because I need to set at code-behind (after checking if user is authenticated)

What can I do?

p.s.
It doesn't have to be Panel, any other control that I can find with Findcontrol and can hold other controls.

Update:

I set the the js event in code behind:
protected void gvw_RowCreated(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {

     if (UserIsAuthenticated)
     { 
         HyperLink title = e.Row.FindControl("lnkTitle") as HyperLink; 
        Panel panel = e.Row.FindControl("panel") as Panel; 
        title.Attributes.Add("onmouseover", "ShowHidePanel(" + panel.ClientID +")");
        //All get the same id!!!
     }
   }
}

Answer 1

To use server-side control's ids in javascript you should use ClientID property of the control.

<script type="text/javascript">
function hidePanel(panelId){
    var panel = document.getElementById(panelId);
    panel.style.display = 'none';    
}
</script>

So you can use it in some handler like hidePanel(<%=panel.ClientID%>);.

Answer 2

I guess, to set the panel's id to a unique value, you should use this (note the use of single- and double-quotes):

<asp:Panel id='<%# "Panel_" + Eval("ID") %>'

Although, this will probably still not help, because the client-side ID will be composed from from the IDs of the panel's parent controls and the panel's ID, e.g. ctl00_MyGridView_Panel_1.

As an alternative, you could set the CssClass property of the panel to a unique value (since this will not be changed by ASP.NET) and then use client-side code based to select the panel. E.g. when using jquery:

$('Panel_1').click( ... )

Answer 3

Let ASP.NET generate the ID for you. Then, use the ClientID property.

As long as it's in the same template column, you should be able to use it directly there. Something like this:

<asp:Panel ID="MyGridViewPanel" runat="server" style="display:none;">Hello World!</asp:Panel>
<a href='javascript:open_the_panel(<%=MyGridViewPanel.ClientID%>);'>Open the panel</a>