2 User Controls on same page not working

2 posts, 0 answers
  1. Liviu
    Liviu avatar
    1 posts
    Member since:
    Feb 2012

    Posted 04 Oct 2012 Link to this post

    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");
    .getElementById("<% =hdnMediaUrl.ClientID %>").value = mediaUrl;

    function cellDeselected(sender, args) {
    var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
    .getElementById("<% =hdnMediaUrl.ClientID %>").value = '';
    <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"
    <MasterTableView CssClass="listItems" AutoGenerateColumns="false" DataKeyNames="Id, MediaUrl"
    ClientDataKeyNames="Id, MediaUrl">
                              bla bla bla

    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">
    <li class="sfFormSeparator">
    <uc:ImageManagerCtrl ID="imageManagerBackground" runat="server" />
    <li class="sfFormSeparator">
    <uc:ImageManagerCtrl ID="imageManagerForeground" runat="server" />

    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.

  2. Tsvetina
    Tsvetina avatar
    1861 posts

    Posted 09 Oct 2012 Link to this post

    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.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top