Sitefinity 4.3 + UserControl + Set property value from Dropd

Im trying to develop a simple UserControl to change one property from a dropdownlist.

I have a string property that should contain the value of the selected Store,
That i change in a dropdownlist.

I've tried it this way, with an enum.
Store ChosenStore get; set;

public enum Store

  Borås, Göteborg, Jönköping

What i expected was that the ChosenStore should become a dropdownlist, but it didnt.

I've tried to do it this way with a custom WebEditor

[Telerik.Cms.Web.UI.WebEditor("SitefinityWebApp.App_Code.ListStores, App_Code")]

public string ChosenStore get; set;

All these simple ways that i've tried seems to be of the older version of Sitefinity and not for 4.0+.

I'm sure there will be an easy way to overcome this issue.

So basically what i want it to do is

View = Show the selected Store
EditMode = Update selected Store from a DropDownList

I have attached 3 screenshots of how im thinking.
My Codebehind, My View, and how it looks in edit mode.

 
Im new to 4.3 so please bare with me :)

Regards
Joachim

Hi Joachim! You are correct that Sitefinity 4 widgets and their editors (called control designers) are a little different than 3.x, and do not yet include support for the web editors.

For a walkthrough the building parts of a widget control designer, take a look here: Anatomy of a Sitefinity 4 Widget

and finally, there is an example that uses an enumeration in the blogs: Creating Advanced Sitefinity 4 Widget Control Designers

this example binds it to a radio list instead of a drop down menu but you can certainly modify it to show this instead.

Please let me know if you have any questions along the way, I'll be happy to assist!

hope this was helpful!

Hi, Thanks alot for pointing me in the right direction, i made this work finally.

But i got another questing, I implemented knockout js in my Usercontrols Designer.

in my StoreDesigner.js when i do "initialize"
im trying to grab
var controlData = this._propertyEditor.get_control();
and i get controlData.MyList

i can see that MyList.Length is 24
But how do i convert this List to a javascript array?
because i cant get the values out?

Do sitefinity have its own deserializer?

Any suggestions?

Alright, i came up with my own solution of implementing knockout js.

In my StoreInfoDesigner.ascx.cs
private string[] _listStores get; set;
        public string[] ListStores
       
            get
           
                return _listStores ?? (_listStores = new []
                                                        
                                                             "'Borås'",
                                                             "'Eskilstuna'",
                                                             "'Falun'",
                                                             "'Gävle'",
                                                             "'Halmstad'",
                                                             "'Helsingborg'",
                                                             "'Jönköping'",
                                                             "'Kalmar'",
                                                             "'Karlstad'",
                                                             "'Kristianstad'",
                                                             "'Linköping'",
                                                             "'Luleå'",
                                                             "'Lund'",
                                                             "'Lund'",
                                                             "'Malmö'",
                                                             "'Norrköping'",
                                                             "'Skövde'",
                                                             "'Stockholm'",
                                                             "'Uppsala'",
                                                             "'Väla'",
                                                             "'Växjö'",
                                                             "'Västerås'",
                                                             "'Örebro'"
                                                         );
           
            set _listStores = value;
       

In my StoreInfoDesigner.ascx
<script type="text/javascript">
    $(document).ready(function()
        var viewModel =
            stores: ko.observableArray(
                [<%=string.Join(",", ListStores) %>])
        ;
        ko.applyBindings(viewModel);
    );
</script>
<div>
    <span>Choose store:</span><br />
      <select id="Stores" data-bind="options: stores"></select>
</div>

And i load knockout.js in the
StoreInfoDesigner.cs
  public override IEnumerable<ScriptReference> GetScriptReferences()
       
            // get script collection
            var scripts = base.GetScriptReferences() as List<ScriptReference>;
            if (scripts == null) return base.GetScriptReferences();

            scripts.Add(new ScriptReference(_knockout));

            return scripts.ToArray();
       
  private string _knockout = "~/Widget/StoreInfo/knockout-1.2.1.js";

Ok, so i made the knockout implementation even better.

Created an extension method

 public static class Exstension
   
        public static string ToJson(this object obj)
       
            var oSerializer = new JavaScriptSerializer();
            return oSerializer.Serialize(obj);
       
 

So now i just write this in my StoreInfoDesigner.ascx
I call my extension method on my list.

var viewModel =
         stores: ko.observableArray(<%=ListStores.ToJson() %>)
    ;
    $(document).ready(function()
        ko.applyBindings(viewModel);
    );