HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Register a custom editor

Describes how to register and configure a custom editor for a specific .NET type.

To create the actual dojo editor, see Create an editor widget.

Examples

The following example demonstrates how to register a custom editor.

[EditorDescriptorRegistration(TargetType = typeof(String[]), UIHint = Global.SiteUIHints.Strings)]
    public class StringListEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "alloy/editors/StringList";
            base.ModifyMetadata(metadata, attributes);
        }
    }

You can use the following technique in case you need to pass any data from the server to the client side editor.

The following example will show how to pass an array of strings created on the server into our custom StringList editor from the previous example:

[EditorDescriptorRegistration(TargetType = typeof(String[]), UIHint = Global.SiteUIHints.Strings)]
    public class StringListEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);
            var reservedWords = new [] { "foo", "bar", "foobar" };
            //This array will be converted to a JSON object and passed to the constructor of the editor widget.        
            metadata.EditorConfiguration.Add("reservedWords", reservedWords);
        }
    }

The previous examples affect both forms and on-page editing modes. However it is possible to specify different settings for both modes:

[EditorDescriptorRegistration(TargetType = typeof(float))]
    public class FloatNumberEditorDescriptor : EditorDescriptor
    {
        public FloatNumberEditorDescriptor()
        {
            //The default editing class that will be used in forms editing mode.
            ClientEditingClass = "dijit/form/NumberTextBox";
        }
    
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);
    
            if (!attributes.OfType<RangeAttribute>().Any())
            {
                var constraints = new Dictionary<string, object>() 
                {
                    {"min", Double.MinValue },
                    {"max", Double.MaxValue }
                };
                //These settings will be passed to the constructor of the editor widget.
                metadata.EditorConfiguration.Add("constraints", constraints);
            }
    
            //Define what kind of editor we want to have, in this case we want to create an inline editor. This is used
            //when the user is in OPE ("on page editing") mode.
            metadata.CustomEditorSettings["uiWrapperType"] = UiWrapperType.Inline;
            //Specify the class for a custom editor responsible for the actual editing in OPE.
            //If not defined the default (forms) editor will be used.
            metadata.CustomEditorSettings["uiType"] = "dijit/form/NumberTextBox";
        }
    }

A complete example of how to create a custom dojo editor can be found in Optimizely Alloy sample site that is available on GitHub.