Show Hide using Javascript on a control, inside a ASCX control in a gridview. (ASP.NET + Javascript)

Question

Hello,

I have written a web usercontrol (ascx). Inside, there is a Panel that I want to show/hide on click of a hyperlink inside the usercontrol.

Normally, this is easy just by doing something like this (the onclick attribute is added to the hyperlink on prerender):

 var PanelToShow = document.getElementById('<%=PanelInvoiceHasBeenCreated.ClientID %>');

    if (PanelToHide != null) {
        PanelToHide.style.display = 'none';
    }

but because the ascx control is held within the gridview, the above will assess all the controls (of which there are many in the gridview) with the name 'PanelInvoiceHasBeenCreated'. The only time it will work is when there is 1 row in the gridview. Currently, with my existing code, if I click the hyperlink in any row, it shows/hides the panel in the bottom row of the gridview!

Therefore, my question is how do I get the actual, unique ID I need to show/hide on the correct control in the correct row??????

Thanks in advance.

Answer 1

That's weird, the ClientID is supposed to be unique. What framework version are you using?

Answer 2

You can do this at the rowdatabound event of gridview something like this

write below code at your gridview rowdatabound event

var usercontrol1=(userControl)e.item.findcontrol("usercontrol1");
var hyperLink1=(Hyperlink)usercontrol1.FindControl("hyperLink1");
var PanelInvoiceHasBeenCreated=(Panel)usercontrol1.FindControl("PanelInvoiceHasBeenCreated");

hyperLink1..Attributes.Add("onclick", "javascript:return ShowHidePanel('"+ PanelInvoiceHasBeenCreated.ClientID +"')"); 

And your java script function at your aspx page should be like this

<script type="text/javascript">
function ShowHidePanel(panelid)
{

var PanelToShow = document.getElementById('panelid');

    if (PanelToHide != null) {
        PanelToHide.style.display = 'none';
    }
return false;

}
</script>