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.
Updated about 2 months ago