Nested Lists in Model with item template

[Karl Posch]

Hello everyone,

currently I am running into a similar problem as described in one of my other threads https://www.syncfusion.com/forums/146668/grid-columntemplates-dictionary-values-lost-in-context-object

I am trying to build up a ListView with a model class which has an internal IList<InnerModelType>. So the main model used for the ListView is basically a class with some normal properties and then a property of IList<InnerModelType>. I also specified an item template to resolve this nested List (a separate Blazor.

The Chrome Browser console displays the exeception listed below:

blazor.server.js:15 [2019-09-02T10:48:44.144Z] Error: System.InvalidCastException: Invalid cast from 'System.String' to 'System.Collections.Generic.IList`1[[esa.WebFrontpanel.Base.ViewModel.Components.PlcVariableVM, esa.WebFrontpanel.Base, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]'.

   at System.Convert.DefaultToType(IConvertible value, Type targetType, IFormatProvider provider)

   at System.String.System.IConvertible.ToType(Type type, IFormatProvider provider)

   at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)

   at System.Convert.ChangeType(Object value, Type conversionType)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType)

   at Syncfusion.EJ2.Blazor.BaseComponent.GetObject(Dictionary`2 Data, Type ModelType)

   at Syncfusion.EJ2.Blazor.Lists.ListViewTemplates.BuildRenderTree(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__5_0(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue()

Here the component code:

Top ListView with some custom styling:

https://pastebin.com/Nnvfifp6

WebListView Razor code

https://pastebin.com/Qnrxajeb

The _plcDeviceList is of type PlcDeviceListVM, which has a List of PlcDeviceVMs. This type now has again an List<Variable> property. I believe the ListView can not resolve the entries of this List?

Could you please help with this? Am I doing something wrong here? If so, could you please provide a sample to me how to achieve this behaviour.

Best Regards,

Karl

[Kanagambigai Murugan]

Hi Karl, 

Good day to you. 

                                                               

We have analyzed the code snippet shared. Before we proceed further we would like to know the following details 

1. Whether you need to access the data declared inside the nested list items from the ListView template?
2. In your code snippet, you have rendered “WebFpListView” and “ItemContentTemplate”. Whether it was your own custom component?

Kindly share your class initialization part or a simple sample that replicates the reported issue. It would be very helpful for us to assist you better. 

Best Regards, 

Kanagambigai M. 

[Karl Posch]

Hello Kanagambigai,

thanks for your reply. Answer to your questions:

1. Whether you need to access the data declared inside the nested list items from the ListView template?
   
   The component specified as ItemTemplate needs to access the List<PlcVariableVM> of the given PlcDeviceVM.
   
   <PlcDisplay Width="300px" Device="@plcDevice" /> 
   
   Component Code:
   
   PlcDisplay
   https://pastebin.com/fYuPRHL3
   
   PlcVariableDisplay
   https://pastebin.com/mANztnL4
   
   PlcDeviceVM class has the mentioned List<PlcVariableVM>
   https://pastebin.com/syRAqqDx
   
   
   
2. 
   

The WebFpListView is my Blazor component, which uses your EjsListView. It's kind of a wrapper with some custom logic and parameters. 

It is possible to specify an RenderFragment<TData> ItemContentTemplate there. If it is defined, it is used as ItemTemplate for the EjsListView. Otherwise the data is output as string value. For the ItemContentTemplate, another component I wrote is used. 

So basically im giving the EjsListView a List<Model>, which has a nested List<AnotherModel> for the Template I use in the EjsListView. Is there a problem with specfing such a List<Model> and giving it as DataSource to an EjsListView, then specifing an item template to render the content of the nested List? 

Thank you very much for your help.

Best Regards,

Karl Posch

[Mohan Ravi]

Hi Karl, 

Thanks for the update. 

We have put together the things you have mentioned and created a sample where inside the template we can able to access the public List<PlcVariableVM> PlcVariables and pass it to the PlcDisplay then from there to the PlcVariableDisplay component with Listview rendering successfully.  

I have attached this simple sample, please cross check this sample against your project, if you are still facing the reported issue please just modify the below sample with your code to reproduce the exception, so that we can help you better and earliest. 

Sample: https://www.syncfusion.com/downloads/support/forum/147121/ze/ListviewNestedModel931565211 

Regards, 

Mohan