Nested Lists in Model with item template

Karl Posch

Asked On September 2, 2019 11:17 AM UTC

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

Reply | Reply with quote

Kanagambigai Murugan [Syncfusion]

Replied On September 3, 2019 09:12 AM UTC

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

Whether you need to access the data declared inside the nested list items from the ListView template?
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.

Reply | Reply with quote

Karl Posch

Replied On September 3, 2019 09:33 AM UTC

Hello Kanagambigai,

thanks for your reply. Answer to your questions:

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

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

Reply | Reply with quote

Mohan Ravi [Syncfusion]

Replied On September 4, 2019 09:33 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147121	Sep 2,2019 11:17 AM UTC	Sep 4,2019 09:33 AM UTC	Blazor	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US