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

Register a custom editor examples

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.

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);
        }
    }

Using the following technique, you can pass data from the server to the client-side editor.

The following example shows how to pass an array of strings created on the server into a 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 forms and on-page editing view. However, you can specify different settings for both views:

[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";
        }
    }

You can find a complete example of creating a custom dojo editor in the Alloy sample site, available on GitHub.