More in this section

Forums / Developing with Sitefinity / Custom Widget Control for ModuleBuilder

Custom Widget Control for ModuleBuilder

2 posts, 0 answered
  1. Graham Brewer
    Graham Brewer avatar
    2 posts
    Registered:
    03 Mar 2010
    22 Feb 2012
    Link to this post
    Hello:
    I am trying to implement a custom widget control for a field in the ModuleBuilder in Sitefinity 4.4. I watched both of the webinars on the subject from last month and have done extensive searches.
    I just need some guidance as to how to set up my code to make this work.

    Simply I need a way to create a dropdown full of values populated from an external web service.

    I have spent three hours worth of searching and am very surprised that the functionality is offered but there is very little documentation on the subject.

    Any assistance is greatly appreciated.
  2. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    27 Feb 2012
    Link to this post
    Hi Graham,

     

    Here's what you need to do in order to achieve such a functionality on the server:

    You can inherit from ChoiceField (as you already did figure out) and modify its Choices collection with the items taken with server code from the service. However, you also need to create a Definition and an Element for your custom field. Then, when you register the field, choose the type to be Multiple Choice. Here's how this should look:

    The Custom Choice Field class that inherits from ChoiceField 

    [FieldDefinitionElement(typeof(CustomChoiceFieldElement))]public classCustomChoiceField : ChoiceField
        
        {
        
            public CustomChoiceField()
        
                : base()
        
            {
        
                      
        
            }
        
                  
        
            public override Telerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs RenderChoicesAs
        
            {
        
                get
        
                {
        
                    returnTelerik.Sitefinity.Web.UI.Fields.Enums.RenderChoicesAs.DropDown;
        
                }
        
                set
        
                {
        
                    base.RenderChoicesAs = value;
        
                }
        
            }
        
                  
        
            protected override voidInitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
        
            {
        
                this.Choices.Clear();
        
                ChoiceItem choiceItem = new ChoiceItem();
        
                choiceItem.Value = "first";
        
                ChoiceItem choiceItem2 = new ChoiceItem();
        
                choiceItem2.Value = "second";
        
          
        
          
        
                this.Choices.Add(choiceItem);
        
                this.Choices.Add(choiceItem2);
        
                base.InitializeControls(container);
        
                      
        
                      
        
                      
        
            }
        
            protected override string ScriptDescriptorType
        
            {
        
                get
        
                {
        
                    return typeof(ChoiceField).FullName;
        
                }
        
            }
        
          
        
        }

    You can see here that I'm clearing the Choices collection and populating it with new records. This is the place where you can populate the collection with your custom data items. 

    Also here are the relevant element and definition for the field control:  
    class CustomChoiceFieldDefinition : ChoiceFieldDefinition
        
        {
        
            public CustomChoiceFieldDefinition() : base()
        
            {
                      this.FieldType = typeof(CustomChoiceField);
            }
        
          
        
            /// <summary>
        
            /// Initializes a new instance of the <see cref="SimpleImageFieldDefinition"/> class.
        
            /// </summary>
        
            /// <param name="element">The configuration element used to persist the control definition.</param>
        
            public CustomChoiceFieldDefinition(ConfigElement element)
        
                : base(element)
        
            {
                     this.FieldType = typeof(CustomChoiceField);
            }
        
        }

    class CustomChoiceFieldElement : ChoiceFieldElement
        
        {
        
            /// <summary>
        
            /// Initializes a new instance of the <see cref="SimpleImageFieldElement"/> class.
        
            /// </summary>
        
            /// <param name="parent">The parent.</param>
        
            public CustomChoiceFieldElement(ConfigElement parent)
        
                : base(parent)
        
            {
        
            }
        
          
        
                  
        
          
        
            /// <summary>
        
            /// Gets an instance of the <see cref="SimpleImageFieldDefinition"/> class.
        
            /// </summary>
        
            /// <returns></returns>
        
            public override DefinitionBase GetDefinition()
        
            {
        
                return new CustomChoiceFieldDefinition(this);
        
            }
        
        }

    If you want to bind the dropdown on the client, using services, you can do that with one our client binder controls. More information on them can be found here:
    http://www.sitefinity.com/documentation/documentationarticles/developers-guide/deep-dive/client-side-programming/client-binder-controls 

    Regards,
    Svetoslav Petsov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered