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

Forums / Developing with Sitefinity / Sitefinity 4.3 + UserControl + Set property value from Dropdownlist.

Sitefinity 4.3 + UserControl + Set property value from Dropdownlist.

5 posts, 1 answered
  1. Joachim Karlsson
    Joachim Karlsson avatar
    8 posts
    Registered:
    04 May 2010
    14 Dec 2011
    Link to this post

    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

  2. SelAromDotNet
    SelAromDotNet avatar
    912 posts
    Registered:
    18 Jul 2012
    14 Dec 2011
    Link to this post
    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!
    Answered
  3. Joachim Karlsson
    Joachim Karlsson avatar
    8 posts
    Registered:
    04 May 2010
    15 Dec 2011
    Link to this post
    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?

  4. Joachim Karlsson
    Joachim Karlsson avatar
    8 posts
    Registered:
    04 May 2010
    16 Dec 2011
    Link to this post
    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";
  5. Joachim Karlsson
    Joachim Karlsson avatar
    8 posts
    Registered:
    04 May 2010
    16 Dec 2011
    Link to this post
    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);
        });
5 posts, 1 answered