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

Forums / Developing with Sitefinity / Registering javascript event ot ButtonSelector

Registering javascript event ot ButtonSelector

2 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    16 Sep 2010
    Link to this post
    Hi,

    In a custom module Im using a ButtonSelector so that the user can select a document from the library. when threy have chosen "Im done", the associated textbox gets populated with the library item guid.

    This works fine, however to make it a bit more user friendly I want to show the user the document name that has been selected, but still store the guid for programatical use. Is there anyway of registering an event to the "Im done" button of the document selector dialog?

    Can this be done?

    Regards,
    higgsy
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    16 Sep 2010
    Link to this post
    Hi Alastair,

    You can add TextBox to the TextBox of the button selector and there set the Text of the item. ButtonSelector control as a property AssociatedControls where you can add multiple IDs of controls associate with the current instance of ButtonSelector control.

    Then you have to modify Sitefinity\Admin\ControlTemplates\News\Dialogs\ButtonSelector.ascx  where you can get the document name inside OnClientClose js function and set the associated control value.

    here is a sample code

    ButtonSelector.ascx

    <script type="text/javascript">
        var selectedItem = null;
         
        function openDialog(clientId, assignedControlIds) {
            var window = $find(clientId);
            assignedControls = assignedControlIds.split(',');
            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;
                }
                else if (sender.argument.attributes["sfref"] != undefined) {
                    unresolved = sender.argument.attributes["sfref"].value;
                }
     
                debugger;
                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 {
                                    if (assignedControls[i] == "TextBox2") {
                                        var tb2 = document.getElementById(assignedControls[i]);
                                        tb2.value = sender.argument.innerHTML;
                                    }
                                    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 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>
     
    <telerik:RadWindow OnClientClose="OnClientClose" VisibleStatusbar="false" Width="750" Height="600" runat="server" id="dialogWindow" Behaviors="close" EnableEmbeddedSkins="False" Skin="Sitefinity"></telerik:RadWindow>
    <asp:HyperLink NavigateUrl="javascript:void(0);" runat="server" ID="selectBtn" Text="<%$Resources:Select %>"></asp:HyperLink>


    <li class="selector">
            
           <asp:TextBox ID="TextBox1" Text="" runat="server" MaxLength="250"></asp:TextBox>
           <asp:TextBox ID="TextBox2" Text="" runat="server" MaxLength="250"></asp:TextBox>
           <sfLib:ButtonSelector ID="ButtonSelector1" WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" AssociatedControls="TextBox1,TextBox2" runat="server" cssclass="pickerWrapper" ButtonText="Select" />
           <p class="example">
               <asp:Literal ID="Literal15" runat="server" Text="ThumbnailNote"></asp:Literal>
           </p>
       </li>

    Instead of TextBox you can use Literal/Label

    Greetings,
    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
2 posts, 0 answered