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

Forums / General Discussions / Browse and replace image implementation in custom control

Browse and replace image implementation in custom control

8 posts, 0 answered
  1. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    02 Feb 2011
    Link to this post
    Hi guys,

    I'm new to sitefinity.

    I have a custom user control that was already made and  looks like this : 

    namespace SitefinityWebApp.UserControls
    {
        //[ControlDesigner(typeof(SitefinityWebApp.Class.UserControlDesigner))]
        public partial class ImageComponent : System.Web.UI.UserControl
        {
     
            private string m_ImageUrl = string.Empty;
     
            public string ImageUrl
            {
                get { return m_ImageUrl; }
                set { m_ImageUrl = value; }
            }
     
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
        }
    }

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageComponent.ascx.cs" Inherits="SitefinityWebApp.UserControls.ImageComponent" %>
     
    <%if(ImageUrl!=string.Empty){ %>
        <img src="<%=ImageUrl %>" alt=""/>
    <%} %>

    Basically it's an image with the url property which now you have to set manually through the ImageUrl property.

    What I need to do is to add to this property a button and be able to browse within sitefinity  content-images to select another image to replace this one.

    I have done some research and found a solution that included WebUITypeEditor but it doesn't seam to be valid on 4.0 anymore.

    I must admit I'm stuck.
    I would truly appreciate if you could give me a solution to this problem(please be as specific as you can because I'm new and could use all the details). 

    Regards,
    Alex
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    02 Feb 2011
    Link to this post
    Hello Alex,

    You have to implement a custom control designer that wraps MediaContentSelectorView .

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Image"
        ParentType="Telerik.Sitefinity.Libraries.Model.Album"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>

    Inside Initialize of your javascript you can create a delegate and subscribe for onItemSelectCommand

    this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect); this.add_onItemSelectCommand(this._itemSelectDelegate);

    and get the selected item


        _itemSelect: function (sender, args) {
            var dataItem = args.get_dataItem();
        },

        add_onItemSelectCommand: function (delegate) {
            this.get_events().addHandler('onItemSelectCommand', delegate);
        },

    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
  3. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    03 Feb 2011
    Link to this post
    Hi Ivan,

    Thanks for your solution.
    However I haven't been able to test it yet. I forgot to mention one aspect. I need to do the changing of the image url property from inside the edit of the user control.

    I managed to  implement a custom control designer using both your link and took the files from here. The problem I get now is that when I place the first line

    [ControlDesigner(typeof(SitefinityWebApp.UserControls.UserControlDesigner))]
        public partial class ImageComponent : System.Web.UI.UserControl
        {

            private string m_ImageUrl = string.Empty;

            [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]
            public string ImageUrl
            {
                get { return m_ImageUrl; }
                set { m_ImageUrl = value; }
            }

            protected void Page_Load(object sender, EventArgs e)
            {

            }
        }


    like in the example,  to my ImageComponent user control,  when I click on edit an empty popup shows instead of the old one which was populated with the default properties of the control plus my ImageUrl created property.

    Also whatever i place in the template from the custom control doesn't show in my control.

    Any ideea why is this happening? Do I need the add something in the js? now all the functions are empty as copied from the attached archive from the example.

    Thanks,
    Alex
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Feb 2011
    Link to this post
    Hello Alex,

    There is something wrong with the UserControlDesigner or you have not set the client component for it.

    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
  5. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    03 Feb 2011
    Link to this post
    Hi Ivan,

    How do I set the client component?

    Thanks,
    Alex


  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Feb 2011
    Link to this post
    Hello Alex,

    This is documented in the tutorial that I sent you - Writing the JavaScript for the dialog

    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
  7. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    03 Feb 2011
    Link to this post
    Hi Ivan,

    Thanks for the reminder. I  have set the client component like in the example, added something simple.

    The problem however is the same , I realized it was from a js error which I couldn't see before because I was using chrome and didn't have debugger enabled.

    In IE with JS debugger enabled the application breaks at this line from the js :

    SitefinityWebApp.UserControls.registerClass('SitefinityWebApp.UserControls.UserControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

    the js file looks like this(removed what I added to refreshUI and applychanges - thought that my cause the errors but after removing the code I still get the error )

    Type.registerNamespace("SitefinityWebApp.UserControls");
     
    SitefinityWebApp.UserControls.UserControlDesigner = function (element) {
        SitefinityWebApp.UserControls.UserControlDesigner.initializeBase(this, [element]);
    }
    SitefinityWebApp.UserControls.UserControlDesigner.prototype = {
        initialize: function () {
            SitefinityWebApp.UserControls.UserControlDesigner.callBaseMethod(this, 'initialize');
             
        },
        dispose: function () {
            SitefinityWebApp.UserControls.UserControlDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
             
     
        },
        applyChanges: function () {
           

        }
    }
    SitefinityWebApp.UserControls.registerClass('SitefinityWebApp.UserControls.UserControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();


    The error :

    Object doesn't support this property or method  Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl01_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a8f393b2b-3315-402f-b504-cd6d2db001f6%3aea597d4b%3ab25378d2%3bTelerik.Sitefinity.Resources%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3a5fd29111%3a7ee0bb1f%3a83eb063b%3a64dcfe0a%3a1154458f%3a2232f901%3a24e33f3%3bTelerik.Sitefinity%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3a993d8e92%3a5b182b17%3afa91e8b7%3afe4b1370%3ad0257175%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a6955197e-6bcc-48a0-9bff-1fd043726dc6%3a16e4e7cd%3a6a6d718d%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3aa67f29d6%3a798214d1%3bSitefinityWebApp%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen-US%3ad76b1205-6d6c-4cd6-abff-373798ab9541%3acffcdff%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3a29ad74ff%3a5053a0f8%3bTelerik.Web.UI%2c+Version%3d2010.3.1109.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a6955197e-6bcc-48a0-9bff-1fd043726dc6%3af7645509%3a24ee1bba%3a1e771326%3aa7e79140%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3aee25fa49%3bTelerik.Sitefinity.Resources%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen-US%3a3dfc1080-eaf3-458e-bf48-a065bc9fddc9%3a1077b7cd%3bTelerik.Sitefinity%2c+Version%3d4.0.1098.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen-US%3a03576c61-1acc-46c1-bbde-96f24ca1c910%3a4a73a146%3a5c2616b0, line 6160 character 1


    Any ideas?

    Thanks,
    Alex
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Feb 2011
    Link to this post
    Hi Alex,

    I think that there is conflict in the way that you are registering the client side component. Pleas make sure that you use proper typename and base class. You can take a look at Type.registerClass Method

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