2 User Controls on same page not working

[Liviu]

Hello. I have an user control and i want to use it twice on same page. This is the UC.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageManagerCtrl.ascx.cs"
    Inherits="SitefinityWebApp.Application.Backend.Controls.ImageManagerCtrl" %>
<script type="text/javascript">
    function cellSelected(sender, args) {
        var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
        document.getElementById("<% =hdnMediaUrl.ClientID %>").value = mediaUrl;
    }

    function cellDeselected(sender, args) {
    var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
    document.getElementById("<% =hdnMediaUrl.ClientID %>").value = '';
    }
    
</script>
<asp:Panel runat="server" ID="pnlMedia">
    <asp:HiddenField runat="server" ID="hdnMediaUrl" ClientIDMode="Static" />
    <asp:DropDownList ID="lstAlbums" runat="server" Width="100%" OnSelectedIndexChanged="lstAlbums_SelectedIndexChanged"
        AutoPostBack="True" />
    <br />
    <telerik:RadGrid ID="grdPhotos" runat="server" GridLines="None" Skin="Sitefinity"
        OnItemDataBound="grdPhotos_ItemDataBound">
        <MasterTableView CssClass="listItems" AutoGenerateColumns="false" DataKeyNames="Id, MediaUrl"
            ClientDataKeyNames="Id, MediaUrl">
            <Columns>
                          bla bla bla
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Panel>

And here is the page where i need.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Edit.ascx.cs" Inherits="SitefinityWebApp.Application.Backend.Affinia.Slides.Edit" %>
<%@ Register TagPrefix="uc" Src="../../Controls/ImageManagerCtrl.ascx" TagName="ImageManagerCtrl" %>
<asp:HiddenField ID="hdnItemId" runat="server" />
<fieldset class="sfNewContentForm agnesianContentForm">
    <ul>
        <li class="sfFormSeparator">
            <uc:ImageManagerCtrl ID="imageManagerBackground" runat="server" />
        </li>
        <li class="sfFormSeparator">
            <uc:ImageManagerCtrl ID="imageManagerForeground" runat="server" />
        </li>
    </ul>
</fieldset>  

I need in the second form the address for one image clicked in the first user control and one from the second user control. The address is stored in the hidden field and is returned with if(!string.IsNullOrEmpty(hdnMediaUrl.Value)) return hdnMediaUrl.Value; from code behind.

My problem is that only the second ImageManager works. The second one, when is clicked, run as the first one. I found that usint alert( "<%=this.ClientID%>"); in cellSelected function. Everytime it show foreground's user control id.

I tryed to change ClientIdMode, tryed everithing i know to do. Something interesting is that if i change the position of user controls, the second one is used too. Is like i have just one of them.

I spent hours trying to solve this problem and no help. 

Thanks for you help.

[Tsvetina]

Hello Liviu,

One option would be to manually register variables from the server that contain the IDs of the hidden fields. That would be the more consistent way to do it.
A slightly easier, but hard-coded one would be to remove the ClientIdMode setting from the hidden field and then use the grid client id and the server ID of the HiddenField to get the client one:

function cellSelected(sender, args) {
    var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
    var hiddenID = sender.get_id().replace("grdPhotos", "hdnMediaUrl");
    document.getElementById(hiddenID).value = mediaUrl;
}

function cellDeselected(sender, args) {
    var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
    var hiddenID = sender.get_id().replace("grdPhotos", "hdnMediaUrl");
    document.getElementById(hiddenID).value = '';
}

I hope this helps.

Regards,
Tsvetina
the Telerik team