We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Nested Lists in Model with item template

Thread ID:

Created:

Updated:

Platform:

Replies:

147121 Sep 2,2019 11:17 AM UTC Sep 4,2019 09:33 AM UTC Blazor 3
loading
Tags: ListView
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:

WebListView Razor code

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 [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 

  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
Replied On September 3, 2019 09:33 AM UTC

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



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 [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. 


Regards, 
Mohan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon