1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Buttonselector - Custom metafield

Buttonselector - Custom metafield

17 posts, 0 answered
  1. Rein
    Rein avatar
    22 posts
    Registered:
    07 Oct 2008
    08 Jun 2009
    Link to this post
    For the news module I have added an extra metafield "LargeImage" to select a larger image from one of the image libraries. It works fine except for the fact that selecting an image from a library isn't working in the admin section of the news module.

    I've added the following code in the NewsItemNew.ascx and NewsItemEdit.ascx files.

    <asp:Label ID="LabelLargeImage" AssociatedControlID="LargeImage" runat="server"
                                <asp:Literal ID="Literal271" runat="server" Text="Large Image"></asp:Literal> 
                                <em id="LargeImageLabel" runat="server"></em> 
                            </asp:Label> 
                            <asp:TextBox ID="LargeImage" Text="" runat="server" MaxLength="250"></asp:TextBox> 
                             
                            <sfLib:ButtonSelector ID="ButtonSelector1" WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/Libraries/Dialogs/ButtonSelector.ascx" AssociatedControls="LargeImage" runat="server" cssclass="pickerWrapper" ButtonText="<%$Resources:Select%>" /> 
                             
                            <class="example"><asp:Literal ID="Literal19" runat="server" Text="The URL of the image that will display in the News details."></asp:Literal></p

    The problem is, is when selecting the image for the LargeImage field it enters the url to the "Thumbnail" textbox instead of the "LargeImage" textbox.

    It appears a more or less similar issue has been mentioned earlier in the following KB article: http://www.sitefinity.com/support/knowledge-base/kb-article/b1154K-baba-b1154T-cgh.aspx and being mentioned as a known issue. Has this been resolved yet?


  2. Rein
    Rein avatar
    22 posts
    Registered:
    07 Oct 2008
    08 Jun 2009
    Link to this post
    ps: I noticed the ItemTemplatePath in the NewsItemNew.ascx and NewsItemEdit.ascx point to a non-existent file by default. It appears this wasn't ported correctly to the new 3.6 architecture.

    <sfLib:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" AssociatedControls="Thumbnail" runat="server" cssclass="pickerWrapper" ButtonText="<%$Resources:Select%>" /> 

  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    08 Jun 2009
    Link to this post
    Hello Rein,

    There is a problem with the js related to the multiple selectors in News module. Unfortunately the fix will require creating a custom selector with multiple textboxes and setting the id of the TextBox on each request.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Rein
    Rein avatar
    22 posts
    Registered:
    07 Oct 2008
    11 Jun 2009
    Link to this post
    Hi Ivan,

    Thank you for your reply.

    Can you provide me with some very basic directions on how to accomplish this?

    Cheers,

    Rein
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    11 Jun 2009
    Link to this post
    Hello Rein,

    The button selector is not prepared for multiple instances. The way you can sort out the problem requires to override the control as work with js.

    Sample code:

    namespace Telerik.Libraries.WebControls  
    {  
      
        public class CustomButtonSelector : ButtonSelector  
        {  
            public CustomButtonSelector()  
            {  
            }  
      
            string windowID;  
      
            protected override void CreateChildControls()  
            {  
                base.CreateChildControls();  
                ButtonSelector.ControlContainer cont = this.Controls[0] as ButtonSelector.ControlContainer;  
                windowID = cont.RadWindow.ClientID;  
            }  
      
            protected override void OnPreRender(EventArgs e)  
            {  
                if (!String.IsNullOrEmpty(this.AssociatedControls))  
                {  
                    string[] controlIDs = this.AssociatedControls.Split(new char[] { ',', ' ' }, StringSplitOptions.RemoveEmptyEntries);  
                    StringBuilder arrayDeclaration = new StringBuilder("var assignedControls = new Array(");  
                    for (int i = 0; i < controlIDs.Length; i++)  
                    {  
                        Control ctrl = this.NamingContainer.FindControl(controlIDs[i].Trim());  
                        if (ctrl != null)  
                        {  
                            if (i == 0)  
                                arrayDeclaration.Append("'" + ctrl.ClientID + "'");  
                            else  
                                arrayDeclaration.Append(", '" + ctrl.ClientID + "'");  
                        }  
                    }  
                    arrayDeclaration.Append(");");  
      
                        this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), windowID ,  
                            arrayDeclaration.ToString(),  
                            true);  
                }  
      
                if (Page != null)  
                {  
                    string[] controlIDs = this.AssociatedControls.Split(new char[] { ',', ' ' }, StringSplitOptions.RemoveEmptyEntries);  
                    StringBuilder arrayDeclaration = new StringBuilder();  
                    for (int i = 0; i < controlIDs.Length; i++)  
                    {  
                        Control ctrl = this.NamingContainer.FindControl(controlIDs[i].Trim());  
                        if (ctrl != null)  
                        {  
                            if (i == 0)  
                                arrayDeclaration.Append(ctrl.ClientID);  
                            else  
                                arrayDeclaration.Append("," + ctrl.ClientID);  
                        }  
                    }  
                    this.Page.ClientScript.RegisterStartupScript(typeof(CustomButtonSelector), windowID+"1",  
                        string.Format("addButtonSelectorMapping('{0}','{1}');", arrayDeclaration.ToString(), windowID), true);  
                }  
            }  
        }  
    }  
     

    The logic in the template for js should also be changed and you should use
    SelectedItem function to get the TextBox and the assign the text to it.

    Sample code:

    <script type="text/javascript">  
        var selectedItem = null;  
        
        function openDialog() {  
            var window = $find("<%= dialogWindow.ClientID %>");  
            window.show(); 
        }  
      
        function OnClientClose(sender, eventArgs) {  
            if (sender.argument) {  
              
                var title = '';  
                var altText = '';  
                var src = '';  
                var width;  
                var height;  
                var unresolved;  
                  
      
                if (sender.argument.title)  
                    title = sender.argument.title;  
                if (sender.argument.altText)  
                    altText = sender.argument.altText;  
                if (sender.argument.src)  
                    src = sender.argument.src;  
                if (sender.argument.width && sender.argument.height) {  
                    width = sender.argument.width;  
                    height = sender.argument.height;  
                }  
                if (sender.argument.unresolved)  
                    unresolved = sender.argument.unresolved;  
      
    for (var k in syncData) {  
    }  
                var key = sender.get_element().id;  
                if (typeof (myCustomBeforeLink) != 'undefined') {  
                    myCustomBeforeLink(syncData[key], src, altText, title, width, height, unresolved);  
                }  
                selectedItem = new SelectedItem(src, altText, title, width, height, unresolved);  
                  
                if (typeof (sfUseResolvedUrl) == 'undefined') {  
                    sfUseResolvedUrl = true;  
                }  
      
                for (i = 0; i < assignedControls.length; i++) {  
                    if (assignedControls[i] != '') {  
                        var element = document.getElementById(assignedControls[i]);  
                        if (element.src)  
                            if (!(/selectedImage/.test(element.id)) && !(/uploadedImage/.test(element.id)))  
                            element.src = sender.argument.src;  
                        else  
                            element.src = sender.argument.src + '?width=300&height=300&decreaseOnly=true';  
                        else if (typeof (element.value) != 'undefined' && element.value != null) {  
                            if ( !sfUseResolvedUrl && (/selectedValue/.test(element.id))) {  
                                element.value = unresolved;               
                            }  
                            else {  
                                element.value = sender.argument.src;  
                            }  
                        }  
                        else if (typeof (element.href) != 'undefined')  
                            element.href = sender.argument.src;  
                        else if (typeof (element.innerHTML) != 'undefined')  
                            element.innerHTML = sender.argument.src;  
                    }  
                }  
            }  
        }  
      
        function SelectedItem(src, altText, title, width, height, unresolved) {  
            this.src = src;  
            this.altText = altText;  
            this.title = title;  
            this.width = width;  
            this.height = height;  
            this.unresolved = unresolved;  
            if(typeof(beforeInsertLink) != 'undefined') {  
            beforeInsertLink(src, altText, title, width, height);  
            }  
    }  
      
    </script 


    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Rein
    Rein avatar
    22 posts
    Registered:
    07 Oct 2008
    11 Jun 2009
    Link to this post
    Thanks Ivan for your quick reply!

    With this code I will be able to fix the issue.

    Excellent support!
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    11 Jun 2009
    Link to this post
    Hi Rein,

    It is the sample code, most of the logic is done there, but it requires fixing some problems because the client id of the texbox cannot be found.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Jay
    Jay avatar
    51 posts
    Registered:
    16 Jul 2008
    07 Jul 2009
    Link to this post
    Hey Rein,
    I was wondering if you'd had any luck with this.  I'm running into the exact same issue and would be interested in seeing your code if you've gotten this custom selector to work.
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    08 Jul 2009
    Link to this post
    Hi Jay,

    We have not fixed this issue yet. If someone of the community has managed to do it, this will be great.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Juliano Araujo
    Juliano Araujo avatar
    2 posts
    Registered:
    03 Mar 2009
    10 Aug 2009
    Link to this post
    Hi Ivan,

    I was wondering if you'd had any luck with this?

    Thanks!

    Regards,
    Juliano
  11. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    10 Aug 2009
    Link to this post
    Hi Juliano Araujo,

    Please, check the support ticket with the same issue you have opened. An answer to your question has been posted there.

    Sincerely yours,
    Rado
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  12. Dave Ranck
    Dave Ranck avatar
    14 posts
    Registered:
    30 Oct 2003
    23 Aug 2009
    Link to this post
    We are experiencing the same issue with 2 button selectors on a backend editor page. Using the code posted above, I am getting "Microsoft JScript runtime error: Object expected" in the Modules.aspx page at the following line.

    addButtonSelectorMapping(

    'ctl00_ContentPlaceHolder1_contolPanel_ctl00_ctl01_ctl00_ctl00_physicianEditor_thumbImage','ctl00_ContentPlaceHolder1_contolPanel_ctl00_ctl01_ctl00_ctl00_physicianEditor_ButtonSelector1_ctl00_ctl00_dialogWindow');

     


    I assume this is the meaning of "the client id of the textbox cannot be found".
    Has anyone found a solution?
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    24 Aug 2009
    Link to this post
    Hi Mike Brady,

    You can take a look at the following KB or try to implement the logic from the previous posts( it is sample)

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14. Nick
    Nick avatar
    1 posts
    Registered:
    12 Feb 2009
    24 Aug 2009
    Link to this post
    Was this fixed in the 3.7 release? If not do you/can you provide a fix for it?

    Thank you.
  15. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    24 Aug 2009
    Link to this post
    Hello Nick,

    Below is a sample implementation that should fix the problem. Generally the solution is a user control that could be used instead of ButtonSelector.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="LibrarySelector.ascx.cs" Inherits="UserControls_Libraries_LibrarySelector" %> 
     
    <script type="text/javascript"
        var selectedItem2 = null
     
        function openDialog2() { 
            var window = $find("<%= dialogWindow.ClientID %>"); 
            window.show(); 
            //window.set_Status(""); 
            //alert(window.parent); 
     
        } 
     
        function OnClientClose2(sender, eventArgs) { 
            if (sender.argument) { 
                var title = ''
                var altText = ''
                var src = ''
                var width; 
                var height; 
                var unresolved; 
     
                if (sender.argument.title) 
                    title = sender.argument.title; 
                if (sender.argument.altText) 
                    altText = sender.argument.altText; 
                if (sender.argument.src) 
                    src = sender.argument.src; 
                if (sender.argument.width && sender.argument.height) { 
                    width = sender.argument.width; 
                    height = sender.argument.height; 
                } 
                if (sender.argument.unresolved){ 
                    unresolved = sender.argument.unresolved; 
                } 
                else if (sender.argument.attributes["sfref"] != undefined) { 
                    unresolved = sender.argument.attributes["sfref"].value; 
                } 
     
                selectedItem2 = new selectedItem2(src, altText, title, width, height, unresolved); 
     
                if (typeof (sfUseResolvedUrl) == 'undefined') { 
                    sfUseResolvedUrl = true
                } 
     
                for (i = 0; i < assignedControls2.length; i++) { 
                    if (assignedControls2[i] != '') { 
                        var element = document.getElementById(assignedControls2[i]); 
                        if (element.src) 
                            if (!(/selectedImage/.test(element.id)) && !(/uploadedImage/.test(element.id))) 
                            element.src = sender.argument.src; 
                        else 
                            element.src = sender.argument.src + '?width=300&height=300&decreaseOnly=true'; 
                        else if (typeof (element.value) != 'undefined' && element.value != null) { 
                            if ( !sfUseResolvedUrl && (/selectedValue/.test(element.id))) { 
                                element.value = unresolved;              
                            } 
                            else { 
                                element.value = unresolved
                            } 
                        } 
                        else if (typeof (element.href) != 'undefined') 
                            element.href = sender.argument.src; 
                        else if (typeof (element.innerHTML) != 'undefined') 
                            element.innerHTML = sender.argument.src; 
                    } 
                } 
            } 
        } 
     
        function selectedItem2(src, altText, title, width, height, unresolved) { 
            this.src = src; 
            this.altText = altText; 
            this.title = title; 
            this.width = width; 
            this.height = height; 
            this.unresolved = unresolved; 
            if(typeof(beforeInsertLink) != 'undefined') { 
                beforeInsertLink(src, altText, title, width, height); 
            } 
        } 
    </script> 
     
    <telerik:RadWindow OnClientClose="OnClientClose2" VisibleStatusbar="false" Width="750" Height="600" runat="server" id="dialogWindow" Behaviors="close" EnableEmbeddedSkins="False" Skin="Sitefinity"></telerik:RadWindow> 
    <asp:HyperLink NavigateUrl="javascript:void(0);" onclick="openDialog2();" runat="server" ID="selectBtn" Text="Select"></asp:HyperLink> 
     

    code behind

    using System; 
    using System.Collections; 
    using System.Configuration; 
    using System.Data; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.HtmlControls; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.ComponentModel; 
    using System.Text; 
     
    public partial class UserControls_Libraries_LibrarySelector : System.Web.UI.UserControl 
     
        public string WindowNavigateUrl 
        { 
            get 
            { 
                object o = this.ViewState["WindowNavigateUrl"]; 
                if (o == null
                    return Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/ImageDialog.aspx"); 
                return (string)o; 
            } 
            set 
            { 
                this.ViewState["WindowNavigateUrl"] = value; 
            } 
        } 
     
        public string AssociatedControls 
        { 
            get 
            { 
                object o = this.ViewState["AssociatedControls"]; 
                if (o == null
                    return String.Empty; 
                return (string)o; 
            } 
            set 
            { 
                this.ViewState["AssociatedControls"] = value; 
            } 
        } 
     
        protected override void OnPreRender(EventArgs e) 
        { 
            base.OnPreRender(e); 
     
            dialogWindow.NavigateUrl = this.WindowNavigateUrl; 
     
            if (!String.IsNullOrEmpty(this.AssociatedControls)) 
            { 
                string[] controlIDs = this.AssociatedControls.Split(new char[] { ',', ' ' }, StringSplitOptions.RemoveEmptyEntries); 
                StringBuilder arrayDeclaration = new StringBuilder("var assignedControls2 = new Array("); 
                for (int i = 0; i < controlIDs.Length; i++) 
                { 
                    Control ctrl = this.NamingContainer.FindControl(controlIDs[i].Trim()); 
                    if (ctrl != null
                    { 
                        if (i == 0) 
                            arrayDeclaration.Append("'" + ctrl.ClientID + "'"); 
                        else 
                            arrayDeclaration.Append(", '" + ctrl.ClientID + "'"); 
                    } 
                } 
                arrayDeclaration.Append(");"); 
     
                if (!this.Page.ClientScript.IsClientScriptBlockRegistered("selectedValue2")) 
                    this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "selectedValue2"
                        arrayDeclaration.ToString(), 
                        true); 
            } 
        } 
     
     

    Js variables are changed for each control and there should not be a problem with mixed values or IDs.
    You can map the external template for the view you want to extend and declare the control.

    <%@ Register TagPrefix="uc" Src="~/UserControls/Libraries/LibrarySelector.ascx" TagName="LibrarySelector" %>  
     
    ...... 
    ......... 
     
    <li>   
         <asp:TextBox ID="Document" Text="" runat="server"></asp:TextBox>                  
         <asp:Label ID="Label9" AssociatedControlID="Document" runat="server"><asp:Literal ID="Literal24" runat="server" Text="Document"></asp:Literal> <em id="Em2" runat="server"></em></asp:Label>   
         <uc:LibrarySelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx" AssociatedControls="Document" runat="server" cssclass="pickerWrapper"/>  
    </li>   
     
    ..... 
    ......... 



    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  16. Kieran
    Kieran avatar
    56 posts
    Registered:
    14 Aug 2008
    14 Apr 2010
    Link to this post
    Hi Ivan

    I am using the above example to add a field to add an image.

    I can select the image fine but when I click Done on the image selector I get a JS error.

    "selectedItem2 is not a constructor  "
    on this line.

    selectedItem2 =

    new selectedItem2(src, altText, title, width, height, unresolved);

     


    thanks
    Kieran
  17. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    14 Apr 2010
    Link to this post
    Hello Kieran,

    You could use multiple selectors in the backend without problem since 3.7 SP1. The code bug was fixed and using multiple  ButtonSelectors with 3.7 SP3 should not be a problem.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
17 posts, 0 answered