How to template Child Items

Question

Here's my classSnippetSnippetpublic class Activity : ActivityBase
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string FormattedDateTime => DateTime.ToString("dddd, dd MMM HH:mm:ss tt");
 
        public List<Act> Action { get; set; } = new();
    }
 
    public class Act: ActivityBase
    {
    }
 
    public partial class ActivityBase
    {
        public string Title { get; set; }
        public string Message { get; set; }
        public DateTime DateTime { get; set; }
    }

Arrebatrans Nigeria · Accepted Answer

Thank you for your response,I was able to sort out my code and UI through the samplesI realize the limitation with SfListView and worked around it by combining it with SfAccordion

LeoLavanya Dhanaraj · Answer

Hi Arrebatrans,Greetings from Syncfusion support.You can achieve template support for list items with the
help of the Template property in the ListView component. To customize
list items in the application, set the customized template string to the
Template property. Refer to the below documentation for reference.https://blazor.syncfusion.com/documentation/listview/customizing-templates#templateThe ListView component supports Nested List items. To
achieve list navigation, the child property should be defined for the
nested list in the array of JSON. Refer to the below documentation.Documentation : https://blazor.syncfusion.com/documentation/listview/nested-listDemo : https://blazor.syncfusion.com/demos/listview/nested-list?theme=fluentKindly check whether the shared details helpful for you.
Please get back to us if need any further assistance.Regards,Leo Lavanya Dhanaraj

Arrebatrans Nigeria · Answer

I would like to create a separate template for the Child item.

LeoLavanya Dhanaraj · Answer

Hi Arrebatrans,We understand that you want a separate template for the
child item. However, we need some additional time to validate the feasibility
to achieve your requirement and we will update you with further details on June
22, 2022.Please clarify whether you want to apply different styles to
the parent and child items or change the entire HTML template structure for
child. Please provide a screenshot of your expected requirement so that we can
check the feasibility of achieving your scenario. We appreciate your patience.Regards,Leo Lavanya Dhanaraj

Arrebatrans Nigeria · Answer

For some reason i don't know I'm getting a casting exception on the UI when I add the Child to the templateHere's my codeSnippet Snippetprotected List? activityCollection = new(); Snippetpublic class Activity : ActivityBase { public string Id { get; set; } public string Name { get; set; } public string FormattedDate => DateTime.ToString("dddd, dd MMM"); public List Action { get; set; } = new(); } public class Act : ActivityBase { public string FormattedTime => DateTime.ToString("HH:mm:ss tt"); } public partial class ActivityBase { public string Title { get; set; } public string Message { get; set; } public DateTime DateTime { get; set; } }

LeoLavanya Dhanaraj · Answer

Hi Arrebatrans,From your shared code snippet, we understand that you are
facing a casting exception. We suspect that the issue is due to the use of more
than one class in your sample. Even in our Nested List support, we have bound
only one parent class to bind the property for both the root and child list
items. For your reference, we have attached the sample with the single parent
class. Also, refer to the below documentation.https://blazor.syncfusion.com/documentation/listview/nested-listhttps://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewSample1319124675.zip Please check the attached sample and get back to us if you
need any further assistance.Regards,Leo Lavanya Dhanaraj

Indhumathy Loganathan · Answer

Hi Arrebatrans,Thanks for
the update.We are glad
to know that your issue has been resolved. Please get back to us if you need
any further assistance.Regards,Indhumathy
L