Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

Propertylist of Propertylist of page not showing properly

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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.