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

Forums / Developing with Sitefinity / Opening ImageSelector from Custom WebUITypeEditor

Opening ImageSelector from Custom WebUITypeEditor

7 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Aug 2010
    Link to this post
    Hi,

    Im developing a WebUITypeEditor that will return the GUID's of multiple images. To do this i basically want to do the following:

    1) WebUITypeEditor will have a "Select" button that will open the ImageSelector WebEditor
    2) When image has been selected, user clicks "Add" and this will add the image to a databound grid/list
    3) Upon clicking the "Im done" button of my custom WebUITypeEditor the code will get the guid of each image stored in the databound grid/list

    Most of this I can do, however what I'm not sure about is how to i open the ImageSelector from my own WebUITypeEditor? Is it possible?

    Thanks in advance
    higgsy
  2. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Aug 2010
    Link to this post
    Hi all,

    I managed to find a solution which was posted at: http://www.sitefinity.com/devnet/forums/sitefinity-3-x/developing-with-sitefinity/cmsurlwebeditor-in-a-custom-control-property-designer.aspx

    private string image;
        private PropertyEditorDialog Dialog;
     
        protected void Page_Load(object sender, EventArgs e)
        {
     
            this.Dialog = new PropertyEditorDialog();
            this.Dialog.TypeContainer = this;
            this.Dialog.PropertyChanged += new PropertyValueChangedEventHandler(editorDialog_PropertyChanged);
            this.Dialog.Width = Unit.Pixel(300);
            this.Dialog.Height = Unit.Pixel(300);
            this.Controls.Add(this.Dialog);
     
            this.urlPicker.CommandName = "Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries";
            this.urlPicker.CommandArgument = "Choose an image";
            this.urlPicker.Command += new CommandEventHandler(urlPicker_Command);
     
        }
     
        void urlPicker_Command(object sender, CommandEventArgs e) {
            string name = (string)e.CommandArgument;
            this.Dialog.Show(name, e.CommandName);
        }
     
        void editorDialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
        {
            textbox.Text = e.PropertyValue.ToString();
        }

    The only problem I am left with is that when the Dialog window opens, half of it is hidden so you cannot possibly click "Im done". See screenshot attached.

    Can anyone help?

    thnaks
    higgsy
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Aug 2010
    Link to this post
    Hi Alastair,

    You can use directly ButtonSelector control instead of PropertyEditorDialog.

    <li class="selector">
                           <asp:Label ID="Label9" AssociatedControlID="Image" runat="server"><asp:Literal ID="Literal19" runat="server" Text="Image"></asp:Literal> <em id="Em2" runat="server"></em></asp:Label>
                           <asp:TextBox ID="Image" Text="" runat="server" MaxLength="250"></asp:TextBox>
                           <sfLib:ButtonSelector ID="ButtonSelector1" WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageDialog.aspx" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" AssociatedControls="Image" runat="server" cssclass="pickerWrapper" ButtonText="Image" />
                           <p class="example">
                               <asp:Literal ID="Literal4" runat="server" Text="Image"></asp:Literal>
                           </p>
                       </li>



    The problem you see now is related to the size of the modal window - you have to change width and height.

    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
  4. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Aug 2010
    Link to this post
    Hi Ivan,

    I did try changing the height and width of the dialog as you can see from my code:

    this.Dialog.Width = Unit.Pixel(300);
    this.Dialog.Height = Unit.Pixel(300);

    But it really made no difference whatsoever.

    I've added the ButtonSelector contro las you suggested, but clicking it does nothing - in fact, the javascript function attached is void(0);.

    Can you explain how to activate this control, and importantly how to get data back from it once the user has selected the image they want.

    Thanks again
    higgsy
  5. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Aug 2010
    Link to this post
    In fact, forget my last post...

    I've got it working, i was missing the associatedcontrols attribute. However the radwindow that appears is now actually behind my control!!

    Do i need to change some CSS somewhere?

    Thanks
    higgsy
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Aug 2010
    Link to this post
    Hi Alastair,

    You have to change z-index of the main window. Web Resources demystified: Part 3 (Troubleshooting)

    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
  7. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    19 Aug 2010
    Link to this post
    Hi Ivan,

    To clarify, what do you mean by the main window.

    - The overall window that hosts all of the sitefinity navigation etc?
    - Control window
    - The UITYpeEditor window

    ??

    Thanks
    higgsy
Register for webinar
7 posts, 0 answered