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

Forums / Developing with Sitefinity / Implementing Image Selector Control

Implementing Image Selector Control

14 posts, 0 answered
  1. anand
    anand avatar
    59 posts
    Registered:
    11 Jun 2008
    19 Dec 2008
    Link to this post
    We are creating a custom module of banners and portfolio section.
    So we need to create a form at admin section in which I want to use Image Selector (just like Image selector in Sitefinity editor)
    we would like to use a textbox and just beside that a button named “SELECT IMAGE”, after selecting image, path of that Image file will be displayed in that textbox (i.e. /Libraries/Website_Images/imagename.sflb.ashx)

    So please help me to set up that image selector control,

    Thanks for all your help
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Dec 2008
    Link to this post
    Hello anand,

    Here is a simple implementation selector in user control.

    In ascx file we have Label, TextBox, LinkButton, RadWindowManager, RadWindow controls.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebEditor.ascx.cs" Inherits="CustomControls_WebEditor" %> 
     
     
    <asp:Label ID="Label2" AssociatedControlID="Thumbnail" runat="server"></asp:Label> 
    <asp:TextBox ID="Thumbnail" Text="" runat="server" MaxLength="250"></asp:TextBox> 
    <asp:LinkButton ID="picker" runat="server" Text="select" CausesValidation="false"></asp:LinkButton> 
     
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false"
        <Windows> 
            <telerik:RadWindow ID="RadWindow1"  
            runat="server"  
            Width="750"  
            Height="515"  
            VisibleOnPageLoad="false"  
            ClientCallBackFunction="CallBackFunction"
            </telerik:RadWindow> 
        </Windows> 
    </telerik:RadWindowManager> 

    Here is the logic in the code behind.

    using System; 
    using System.Web.UI; 
    using Telerik.Cms.Web.UI; 
     
    public partial class CustomControls_WebEditor : System.Web.UI.UserControl, ITextControl 
        #region Methoods 
        
     
        protected override void OnPreRender(EventArgs e) 
        { 
            base.OnPreRender(e); 
            if (this.Page != null
            { 
                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callback"this.GetScript(), true); 
            } 
        } 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
                RadWindow1.NavigateUrl = "~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx"
                this.returnValue = "returnValue.src"
     
            RadWindow1.OpenerElementID = picker.ClientID; 
        } 
     
        private string GetScript() 
        { 
            string result = "function CallBackFunction(radWindow, returnValue)" + 
                    "{" + 
                            "var oArea = document.getElementById('" + this.Thumbnail.ClientID + "');" + 
                            "if (returnValue) oArea.value = " + this.returnValue + ";" + 
                    "}"
     
            return result; 
        } 
        #endregion 
        #region 
         
        private string returnValue; 
        #endregion 
        #region ITextControl Members 
     
        string ITextControl.Text 
        { 
            get 
            { 
                return this.Thumbnail.Text; 
            } 
            set 
            { 
                this.Thumbnail.Text = value; 
            } 
        } 
        #endregion 
        #region Properties 
        //add some properties here... 
     
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")] 
        public string SelectImage 
        { 
            get 
            { return this.image; } 
            set 
            { this.image = value; } 
        } 
        private string image; 
        #endregion 
     

    For more information take a look at the following KB article where you can find implementation for the admin part of Sitefinity - How to associate content items with files.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. anand
    anand avatar
    59 posts
    Registered:
    11 Jun 2008
    22 Dec 2008
    Link to this post
    This code is working fine at my end but I want a correction from your side.

    I want relative path instead of absolute path

    For Image Selector control I want image path as
    ( ~/Libraries/Website_Images/imagename.sflb.ashx) instead of full path http://localhost/Libraries/Website_Images/imagename.sflb.ashx

    Please help me in this issue
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    23 Dec 2008
    Link to this post
    Hello anand,

    Using this approach there is no way to return relative path. Check out this.returnValue. You could delete it manually or wrap the ButtonSelector and the TextBox keeping the real value in a hidden field. Check out the following KB article How to display filename instead of full path when selecting items from Images and Documents module

    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. anand
    anand avatar
    59 posts
    Registered:
    11 Jun 2008
    23 Dec 2008
    Link to this post

    I have an issue that when I have uploaded image first time and path of image is in that textbox.
    Then clicking on select (open radwindow) we have seen image preview in radwindow for imagepath in textbox,

    But after some refreshing (page post back) when we click on select (open radwindow) it ask for select image but it should show preview for pathimage in textbox (after page post back)


    Please give us correction in code

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Dec 2008
    Link to this post
    Hi anand,

    Thank you for getting back to me.

    Did you apply the last changes from the KB I sent you? Could you send me some code of your implementation to take a look at it and try to figure out what is going wrong?


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. anand
    anand avatar
    59 posts
    Registered:
    11 Jun 2008
    29 Dec 2008
    Link to this post
    In below code I am facing 2 problems, In my page I have 2 ImageSelector control (one for project thunbnail and other for project image)

    a) After refreshing page, when we click on select (open radwindow) it ask for select image but it should show preview for pathimage in textbox (after page post back)
    b) Please correct or modify above code to implement relative path instead of full image path

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ThumbSelector.ascx.cs"

    Inherits="Sitefinity_Admin_Portfolio_ThumbSelector" %>

    <div style="float: left; width: 20%;">

    <asp:Label ID="Label1" AssociatedControlID="Thumbnail" runat="server">Project Thumbnail</asp:Label>

    </div>

    <div style="float: right; width: 80%;">

    <div style="float: left; width: 30%;">

    <asp:TextBox ID="Thumbnail" Text="" runat="server" MaxLength="250" Width="250px"></asp:TextBox>

    <asp:LinkButton ID="PickerThumbnail" runat="server" Text="select" CausesValidation="false"></asp:LinkButton>

    </div>

    <div style="float: right; width: 65%;">

    <asp:RequiredFieldValidator ID="reqThumbnail" runat="server" ControlToValidate="Thumbnail"

    Text="Select Project Thumbnail"></asp:RequiredFieldValidator>

    </div>

    </div>

    <br style="clear: both;" />

    <div style="float: left; width: 20%;">

    <asp:Label ID="Label2" AssociatedControlID="Image" runat="server">Project Image</asp:Label>

    </div>

    <div style="float: right; width: 80%;">

    <div style="float: left; width: 30%;">

    <asp:TextBox ID="Image" Text="" runat="server" MaxLength="250" Width="250px"></asp:TextBox>

    <asp:LinkButton ID="ImageThumbnail" runat="server" Text="select" CausesValidation="false"></asp:LinkButton>

    </div>

    <div style="float: right; width: 65%;">

    <asp:RequiredFieldValidator ID="reqImage" runat="server" ControlToValidate="Image"

    Text="Select Project Image"></asp:RequiredFieldValidator>

    </div>

    </div>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false">

    <Windows>

    <telerik:RadWindow ID="RadWindow1" runat="server" Width="750" Height="515" VisibleOnPageLoad="false"

    ClientCallBackFunction="CallBackFunction">

    </telerik:RadWindow>

    <telerik:RadWindow ID="RadWindow2" runat="server" Width="750" Height="515" VisibleOnPageLoad="false"

    ClientCallBackFunction="CallBackFunction1">

    </telerik:RadWindow>

    </Windows>

    </telerik:RadWindowManager>



    for cs file code

    public partial class Sitefinity_Admin_Portfolio_ThumbSelector : System.Web.UI.UserControl, ITextControl

    {

    #region Methoods

    protected override void OnPreRender(EventArgs e)

    {

    base.OnPreRender(e);

    if (this.Page != null)

    {

    this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", this.GetScript(), true);

    }

    }

    private string GetScript()

    {

    string result = "function CallBackFunction(radWindow, returnValue)" +

    "{" +

    "var oArea = document.getElementById('" + this.Thumbnail.ClientID + "');" +

    "if (returnValue) oArea.value = " + this.returnValue + ";" +

    "}";

    result += "function CallBackFunction1(radWindow, returnValue)" +

    "{" +

    "var oArea = document.getElementById('" + this.Image.ClientID + "');" +

    "if (returnValue) oArea.value = " + this.returnValue + ";" +

    "}";

    return result;

    }

    #endregion

    #region

    public string returnValue;

    #endregion

    #region ITextControl Members

    string ITextControl.Text

    {

    get

    {

    return this.Thumbnail.Text;

    }

    set

    {

    this.Thumbnail.Text = value;

    }

    }

    #endregion

    #region Properties

    //add some properties here...

    [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]

    public string SelectImage

    {

    get

    { return this.image; }

    set

    { this.image = value; }

    }

    private string image;

    #endregion

    protected void Page_Load(object sender, EventArgs e)

    {

    RadWindow1.NavigateUrl = "~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx";

    this.returnValue = "returnValue.src";

    RadWindow2.NavigateUrl = "~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx";

    this.returnValue = "returnValue.src";

    RadWindow1.OpenerElementID = PickerThumbnail.ClientID;

    RadWindow2.OpenerElementID = ImageThumbnail.ClientID;

    }

    }


  8. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    06 Jan 2009
    Link to this post
    Hi Anand,

    I regret to inform you that this falls beyond the support we could provide. Looking at your support inquires, most of the things you asked for were .NET or general programming related.
    Usually we provide support even for the community edition version, which is freeware and not supported regarding to the License Agreement terms. We are always ready to assist with samples or approaches on implementations, but It is the developer’s responsibility to define the schema/specification of the main project relations and process the implementation.

    You may also contact our partners for paid assistance.

     
    Sincerely yours,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Amer Ghanem
    Amer Ghanem avatar
    2 posts
    Registered:
    06 Oct 2009
    16 Dec 2009
    Link to this post
    Hello,

    I am building a module to add new locations. I would like to add an image for the location. I would like to use the sitefinity image selector to select an image from the library. My problem is how to get the guid of the image from the selector so i can store it in the database. I used the code above but this returns the url, I would like to get the guid.

    Thank you for your time.
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    16 Dec 2009
    Link to this post
    Hi Amer Ghanem,

     Use the selector in your template as shown below:

    <%@ Register TagPrefix="sfLib" Namespace="Telerik.Libraries.WebControls" Assembly="Telerik.Libraries" %>
     
    <asp:TextBox ID="TextBox1" Text="" runat="server" MaxLength="250"></asp:TextBox>
    <sfLib:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" AssociatedControls="TextBox1" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" runat="server" cssclass="pickerWrapper" ButtonText="Select Image" />

    Note that the code above will return guid if you use Sitefinity versions newer than 3.6.


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Jeff
    Jeff avatar
    5 posts
    Registered:
    10 Apr 2008
    29 Nov 2010
    Link to this post
    Hello Ivan-

    I have the ButtonSelector working perfectly within EditItemTemplate (GridTemplateColumn) of a RadGrid but when I wrap a RadAjaxPanel around the RadGrid and I click the UpdateCommand I get the following error:

    'OnClientClose' is undefined

    Any ideas what the issues could be. I've been trying to debug for the last 3 days but cannot figure it out.

    Thank you for a quick response

    Jeff

     

  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Nov 2010
    Link to this post
    Hello Jeff,

    The RadWindow seems to be null in the  from which you use . The button selector makes call back and probably it cannot find the RadWindow when you use RadAjaxPanel. It is possible that the panel is trying to update the form on some stage where the RadWindow is null.

    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
  13. Jeff
    Jeff avatar
    5 posts
    Registered:
    10 Apr 2008
    03 Dec 2010
    Link to this post
    What would be the best approach to be able to have the RadAjaxPanel, RadGrid and the ButtonSelector coexist.
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    06 Dec 2010
    Link to this post
    Hello Jeff,

    If EnableAJAX="true" you cannot use the ButtonSelector control and you have to create a custom dialog.

    All the best,
    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
14 posts, 0 answered