This is a migrated thread and some comments may be shown as answers.

is Blazor grid support nested model ?

7 Answers 239 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sajid
Top achievements
Rank 1
Sajid asked on 17 Apr 2020, 03:44 AM

Hello Team,  Just want to check with regarding Blazor Grid.   is it support nested models?   basically  I want to bind a   Object2.Object2.Property 

 

Eg:

   <GridColumn Field=@nameof(ExcelColumn.Settings.Order ) Title="Order" />

 

Thanks,

Sajid

7 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 17 Apr 2020, 06:53 AM

Hello Sajid,

It will, in the upcoming 2.11.0 release: https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models.

Note that using the nameof() operator will not work, because it does not provide the object hierarchy, you will need to set the Field as a string you type in. You can preview the explanations on how this will work in the following file in our documentation repo: https://github.com/telerik/blazor-docs/blob/master/knowledge-base/grid-bind-navigation-property-complex-object.md

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Bob
Top achievements
Rank 1
answered on 22 Dec 2020, 08:03 PM

Hello Marin,

Following your example, I am able to get nested property to display in the grid.  However, I cannot make it work where I have an object that has 2 instances of NestedObject.  For example, I have UpdatedUser and CreatedUser that are both type NestedObject.  I cannot display UpdatedUser.Field1 and CreatedUser.Field1 in the same grid.  I get the following error:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Arg_AmbiguousMatchException
System.Reflection.AmbiguousMatchException: Arg_AmbiguousMatchException
   at System.RuntimeType.GetPropertyImpl(String name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers)
   at System.Type.GetProperty(String name, BindingFlags bindingAttr)
   at System.Type.GetProperty(String name)
   at Telerik.Blazor.Extensions.ReflectionExtensions.GetPropertyValue(Object target, String propertyName)
   at Telerik.Blazor.Extensions.ReflectionExtensions.GetNestedPropertyValue(Object target, String propertyName)
   at Telerik.Blazor.Components.Grid.GridContentCell`1[[TBS.UI.ViewModels.CaseReviewVM, TBS.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_Value()
   at Telerik.Blazor.Components.Grid.GridContentCell`1[[TBS.UI.ViewModels.CaseReviewVM, TBS.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_FormattedValue()
   at Telerik.Blazor.Components.Grid.GridContentCell`1[[TBS.UI.ViewModels.CaseReviewVM, TBS.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

 

0
Marin Bratanov
Telerik team
answered on 23 Dec 2020, 09:43 AM

Hello Bob,

Here's a snippet I tried and it seems to work fine for me (I am testing on the latest version which is 2.20.0 at the moment). I'm also attaching a wasm app with it that seems to work fine for me so you can compare against it.

 

<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
    <GridColumns>
        <GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
        <GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
        <GridColumn Title="Field1 from CreatedUser" Field="CreatedUser.Field1" />
        <GridColumn Title="Field1 from UpdatedUser" Field="UpdatedUser.Field1" />
    </GridColumns>
</TelerikGrid>


@code {
    public class SampleComplexObject
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public User CreatedUser { get; set; }
        public User UpdatedUser { get; set; }

        public SampleComplexObject()
        {
            CreatedUser = new User();
            UpdatedUser = new User();
        }
    }

    public class User
    {
        public string Field1 { get; set; }
        public string OtherField { get; set; }
    }

    public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
        new SampleComplexObject
        {
            ID = x,
            Name = "Name " + x,
            CreatedUser = new User
            {
                Field1 = "created 1 " + x,
                OtherField = "created 2 " + x % 6
            },
            UpdatedUser = new User
            {
                Field1 = "updated 1 " + x,
                OtherField = "updated 2 " + x % 6
            }
        }
    );
}

 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Bob
Top achievements
Rank 1
answered on 23 Dec 2020, 01:21 PM

Hi Marin,

Thanks for looking into this.  When I changed my code to use ViewModels on the UI, this works fine.  When I bind directly to data returned from my web api, I get the AmbiguousMatchException.  My best guess is that this is related to EF Core and navigation properties.  I've seen other odd issues in webassembly when binding to those objects.

0
Marin Bratanov
Telerik team
answered on 23 Dec 2020, 01:37 PM

Hello Bob,

With WebAssembly you should perform database calls on the server, so the blazor front-end should not use entities, and you would usually bind directly to view-models anyway.

These sample projects can help you offload those operations to the server: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Bob
Top achievements
Rank 1
answered on 23 Dec 2020, 02:52 PM

Hi Marin,

Do you have any examples using .NET 5 Blazor WebAssembly and an ASP.NET Core Web API?

0
Marin Bratanov
Telerik team
answered on 23 Dec 2020, 03:12 PM

Hi Bob,

The sample I linked before showcases the main concept, it will work with .NET5 too, just upgrade the projects to use .NET 5.

Another thing you can do is to generate a new telerik blazo project with our VS extensions - the "CRUD, Form, Chart" sample project with WebAssembly an API controller from the server ASP.NET Core project to work with the data.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Sajid
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Bob
Top achievements
Rank 1
Share this question
or