Duplicated
Last Updated: 22 Mar 2020 14:47 by ben
ben
Created on: 20 Mar 2020 22:30
Category: Grid
Type: Bug Report
0
GridReadEventArgs args.Request.ToODataString() Does not Properly Report Sort/Filter Fields in Grid With Nested Complex Models

Likely related to https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models 

Issue - Filtering / Sorting on a column that is bound to a complex object fails to generate the proper OData string.

Example Grid Code, three columns, column 1 and 3 are bound to a complex class, column 2 just a string:


<TelerikGrid Data=@sysVars.Dtos Pageable="true" Sortable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" PageSize="20" TotalCount=@sysVars.Count OnRead=@ReadItems>
        <GridColumns>
            <GridColumn Field=@nameof(SysVar.SysVarType.Name) Title="Type" Editable="false">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.SysVarType.Name
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Value) Title="Value">
                <Template>
                    @{
                        var data = context as SysVar;
                        var link = SysVarDto.FrontEndEditUrl(data.Id.Value);
                        <NavLink href=@link>@data.Value</NavLink>
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Hierarchy.Description) Title="Hierarchy">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.Hierarchy.Description
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>

The values bound to the grid are made up of a complex object.  For the sake of the example


 public class SysVar 
    {
        public string Value { get; set; }

        public Hierarchy Hierarchy { get; set; }

        public SysVarType SysVarType { get; set; }
}

public class Hierarchy 
{
      public string Description { get; set; }
}

public class SysVarType
{
      public string Name { get; set; }
}

Right now I know I can't have the Grid render SysVarType.Name, so I use a custom cell and everything works.  However, if I try to sort/filter on my complex columns, SysVarType or Hierarchy the resulting OData string that is generated is incorrect.

Example of what is should look like, from a Telerik Grid in my React application if I sort on the sysVarType column:


https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&$top=20&$orderby=value,sysVarType/name

 

Same string generated by the Telerik Grid in Blazor


Note: I can't sort two columns at the same time, not a huge issue at this time.

What is failing is the $orderby= doesn't return sysVarType/name and only returns name, causing a 400 on my backend as the class SysVar doesn't have a name field.

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
4 comments
ben
Posted on: 22 Mar 2020 14:47

Marin,

Appreciate the issue was understood and noted, thanks again for the help and clarification!

-ben

ADMIN
Marin Bratanov
Posted on: 22 Mar 2020 14:22

Hello Ben,

Indeed, it is not, what I meant is to showcase the difference between a full field string name, and the nameof() operator. I have added an explicit note in the task for nested models to ensure OData serialization is correct. I'm sorry for not being clear enough in my previous post.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ben
Posted on: 22 Mar 2020 13:00

Marin,

Thanks for the insight into nameOf...should have looked at that first!

Something to consider once nested (complex) models comes online...the OData query generated by your suggestion:

$count=true&$orderby=SysVar.SysVarType.Name&$skip=0&$top=10

The

$orderBy=SysVar.SysVarType.Name

is not valid OData...at least on my end is it failing compared to what is generated by the Kendo React Grid, i.e. the correct string should be:

$orderBy=sysVarType/name

Sending in

  • SysVar/SysVarType/Name
  • SysVarType.Name
  • SysVar.SysVarType.Name

All return 400s as 'the query specified in the URI is not valid.'

I can work around it without nested(complex) models as I can create my Grid Column as:

<GridColumn Field="SysVarType/Name" Title="Type" Editable="false">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.SysVarType.Name
                    }
                </Template>
            </GridColumn>

However once those come into 'play' this won't be as fun to do for every complex column that I want to hook up to OData (which at this point is almost all of them).

ADMIN
Marin Bratanov
Posted on: 22 Mar 2020 08:12

Hello Ben,

The main issue here is that the nameof() operator returns only the last name of the field, not its hierarchy. For example, the following code will render only "Name" on the screen, not "SysVar.SysVarType.Name".

 

 

@nameof(SysVar.SysVarType.Name)

@code{
    public class SysVar
    {
        public string Value { get; set; }

        public Hierarchy Hierarchy { get; set; }

        public SysVarType SysVarType { get; set; }
    }

    public class Hierarchy
    {
        public string Description { get; set; }
    }

    public class SysVarType
    {
        public string Name { get; set; }
    }
}

 

So, I can suggest you try using a string that actually contains the full name

 

<GridColumn Field="SysVar.SysVarType.Name" Title="Type" Editable="false">

 

On my end this gives me a string like

 

$count=true&$orderby=SysVar.SysVarType.Name&$skip=0&$top=10

 

As for multi-column sorting, you can Follow its implementation here (I've added your Vote on your behalf): https://feedback.telerik.com/blazor/1411730-multi-column-sorting

I am now marking this as a duplicate because the following two items should resolve this, assuming that the grid configuration is correct (that is, nested model names are given correctly to the grid):

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor