CollectionEditorDescriptor - How to display a list of complex types?

Hi Guys,

First off apologies if this has already been posted.

That aside, Now for my issue....

I have the following class structure:

public class MenuItem

{

public virtual LinkItemCollection Links { get; set; }

}

public class MenuSubCategory

{

public virtual string SubCategoryTitle { get; set; }

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MenuItem>))]
public virtual IList<MenuItem> MenuItems { get; set; }

}

public class MenuCategory

{

public virtual string CategoryTitle { get; set; }

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MenuSubCategory>))]
public virtual IList<MenuSubCategory> MenuSubCategories { get; set; }

}

In addition to this I also have a number of PropertyDefinitionTypePlugIns defined which look similar to this:

[PropertyDefinitionTypePlugIn]
public class MenuCategoriesProperty : PropertyList<MenuCategory>

{

protected override MenuCategory ParseItem(string value)

{

return JsonConvert.DeserializeObject<MenuCategory>(value);

}

public override PropertyData ParseToObject(string value)

{

ParseToSelf(value);
return this;

}

}

And finally I have added the flowwing property to my Block:

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MenuCategory>))]
public virtual IList<MenuCategory> MenuCategories { get; set; }

Now, when I attempt to edit the above itall works fine.  The issue I have is that episerver doesn't seem to know how to render my complex type so in edit mode, when I add a new Menu Categor, I see the following:

Cards       [object Object], object Object]

What I would like it to display is:

Cards        Birthday, Thank You, Well Done....

All that explained my question is, how would I go about making the above dislpay correctly?

Thanks in advance!

#185960 Dec 07, 2017 14:02
  • Hi Darren,

    If you need to change how something is being formatted in the editor then you can specify a custom formatter for that property.

    First, create an extension to the default episerver collection editor. This will look something like this...

    define([
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "epi-cms/contentediting/editors/CollectionEditor"
    ],
    function (
    array,
    declare,
    lang,
    CollectionEditor
    ) {
    return declare([CollectionEditor], {
    _getGridDefinition: function () {
    var result = this.inherited(arguments);

    result.menuSubCategories.formatter = function (values) {
    return values.map(msc => msc.subCategoryTitle).join();
    };

    return result;
    },
    });
    });

    ...lets save that as MenuSubCategory.js.

    This is hooking into the grid definition code, and telling episerver to use a custom formatter for our MenuSubCategories property.

    Now, to wire this up, you can add an attribute to the MenuSubCategories property in your MenuCategory object:

    public class MenuCategory
    {
    public virtual string CategoryTitle { get; set; }

    [EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MenuSubCategory>))]
    [ClientEditor(ClientEditingClass = "path/to/MenuSubCategories")]
    public virtual IList<MenuSubCategory> MenuSubCategories { get; set; }
    }

    ..and that should do the job. Now, when the editor loads, it should go into the custom formatter we specified, and whatever you return from this will be what is rendered.

    Follow exactly the same pattern for MenuItems property on your MenuSubCategory object.

    #186251 Edited, Dec 14, 2017 16:04