Propertylist of Propertylist of page not showing properly

Muller

Vote:

I have a page with Ilist property and the property has Ilist property in it. While displaying in CMS, it shows [object Object],[object Object] in grid. My code looks like below.

	[CultureSpecific]
        [Required]
        [EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MyPropType>))]
        [BackingType(typeof(MyPropTypeListProperty))]
        [Display(Name = "Something = 11)]
        public virtual IList<MyPropType> MyProps{ get; set; }


       [PropertyDefinitionTypePlugIn]
       public class MyPropTypeListProperty : PropertyListBase<MyPropType>
       {

       }

	public class MyPropType
	{
		[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<MySecondPropType>))]
      		  public virtual IList<MySecondPropType> MySecondProps{get;set;}

	}
	public class MySecondPropType
	{
	...
	}

 	[PropertyDefinitionTypePlugIn]
   	 public class MySecondPropTypeProperty : PropertyListBase<MySecondPropType>
    	{

   	}

#206103

Edited, Aug 02, 2019 13:00

Paul Gruffydd

Vote:

Hi,

I think, if you want to change the way the grid is rendered, you're going to have to write a bit of dojo. I don't know how you want the nested list to display but, assuming you have a property on MySecondPropType called ItemName and you want the nested list to appear in the grid as a list of the ItemName properties, one per line, you could create a JavaScript file 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);
                // Apply custom formatting to the mySecondProps property here
                // Note the fact that property names are converted to camel case
                result.mySecondProps.formatter = function (values) {
                    return values.map(x => x.itemName).join('<br/>');
                };
                return result;
            },
        });
    });

If you save that to a location (e.g. /scripts/dojo/MyCustomCollectionEditor.js), you can then reference it from your list property like this:

[ClientEditor(ClientEditingClass = "/scripts/dojo/MyCustomCollectionEditor.js")]
public virtual IList<MyPropType> MyProps { get; set; }

Which should use the customised version of the collection editor to render the grid with the nested list neatly formatted.

#206124

Aug 02, 2019 19:29

Try our conversational search powered by Generative AI!

Propertylist of Propertylist of page not showing properly