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.

The above worked perfectly for me, with just a few tripping points:

• Probably obvious from Darren's example: The properties come through with the first character of the property name in lowercase, regardless of the capitalisation on your model in code (Your model property MenuSubCategories must be interacted with as menuSubCategories)
• I'd recommend an if statement around the map - If the property doesn't exist (e.g. if the model's field is renamed), not checking for a null / undefined on the property will result in the entire table not being rendered
• I had to add the full editor path to the definition for it to properly be recognised, as follows:

define("path/to/MenuSubCategories", [
  "dojo/_base/array",
  "dojo/_base/declare",
  "dojo/_base/lang",
  "epi-cms/contentediting/editors/CollectionEditor"
  ],
  function (
    array,
    declare,
    lang,
    CollectionEditor
  )

Thanks!