Browse and replace image implementation in custom control

Posted by Community Admin on 03-Aug-2018 15:21

Browse and replace image implementation in custom control

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 02-Feb-2011 00:00

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

Posted by Community Admin on 02-Feb-2011 00:00

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

Posted by Community Admin on 03-Feb-2011 00:00

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

Posted by Community Admin on 03-Feb-2011 00:00

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

Posted by Community Admin on 03-Feb-2011 00:00

Hi Ivan,

How do I set the client component?

Thanks,
Alex


Posted by Community Admin on 03-Feb-2011 00:00

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

Posted by Community Admin on 03-Feb-2011 00:00

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

Posted by Community Admin on 11-Feb-2011 00:00

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

This thread is closed