How to use ImageFieldElement

I have created a content module using Josh's post and it's working great. I was hoping to add a field that would allow end users to select an image from the existing image library or upload a new one. I am using the ImageFieldElement currently and it's working great except for when I go back to edit that item the image won't load into the control. I am telling the control to store the Guid of the image in the database so I don't think it has anything to do with the control having issues with parsing the url that is stored. I also find that if I set the DefaultImageId property to a random image it will load that particular image so I know the control is capable of loading an image. What am I doing wrong exactly, any help would be appreciated. I have supplied the code I am using below. I have also looked into using this example but it limited in functionality and from what I can figure out still doesn't working with custom modules only when adding on to an existing Sitefinity Module. Thanks in advance. 

Hi Ray,

Please take a look at the following forum post. You should better use MediaContentSelector control.
You can pass the value from itemSelected argument. After the item is saved you can store it so when you open the dialog you can pass it to the highlightSelectedImage or another similar method and set the css class over the element.
In RefreshUI you can subscribe for add_onItemDataBound


initialize: function ()
        Telerik.Sitefinity.Samples.SimpleViewCustomDesigner.callBaseMethod(this, 'initialize');

        this._itemSelectedDelegate = Function.createDelegate(this, this._propertyGridItemSelectCommand);
        this._selectorView.add_onItemSelectCommand(this._itemSelectedDelegate);
        this._mediaContentBinderItemDataBoundDelegate = Function.createDelegate(this, this._mediaContentBinderItemDataBound);

    ,

_propertyGridItemSelectCommand: function (sender, args)
        var dataItem = args.get_dataItem();
        var d = this.get_controlData();
        d.SelectedItemValue = dataItem.Id;
    ,

    _mediaContentBinderItemDataBound: function (sender, args)
        var dataItem = args.get_dataItem();
        var id = dataItem.Id;

    ,

    refreshUI: function ()
        var data = this.get_controlData();
        var selector = this.get_selectorView();
     ,


Regards,
Ivan Dimitrov
the Telerik team

Hey Ivan,
I took a look at the post you told me about. It's looks great but it seems to it only work with Control Designers. I am trying to implement this in a custom module admin interface so I am not sure how I would get to the javascript into that page other then to implement a custom FieldElement with a MediaContentSelectorView in it because I can only place code within the admin definitions file which is only c#/vb. Thanks. 

Hello Ray,

I posted a sample code about custom filed element that can be added to a definition class, but this is quite complex. You can see the code here.

There is a sample for image selector in the Products module that comes with SDK installation.

Best wishes,
Ivan Dimitrov
the Telerik team

Thanks Ivan,
I will try those out and see how it goes. As long as I can figure it out once then it should be a breeze the next time I need to implement something like it. Thanks again. 

-Ray

I was able to use the example in the products module to implement the image selector and it works great. Thanks for the tip. For people that don't want to dig into the products module yet I put my findings below. I didn't include how the copy method works in the Manager but this will give you an idea of what's going on. 

This is what goes in the definition class..