Reputation: 2103
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.
Upvotes: 2
Views: 5112
Reputation: 2388
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>
Upvotes: 4
Reputation: 8053
That's weird, the ClientID is supposed to be unique. What framework version are you using?
Upvotes: 0