Sort, Filter and custom template column in TreeList

Question

I am using TreeList and a custom template on a column to display user avatar. I also need to sort and filter on this column. However when combine all of these features (sort and filter) on a template column, it doesn't work. There are 2 issues:

• When disable sort, the filtering doesnt work

• When enable sort, the filtering works but the sorting throw error: "Failed to compare two elements in the array." --> This issue is already resolved as below comment.

Is there any work around solution for this? I am using UI for Blazor 3.0.1

<TelerikTreeList Data="@Tasks"
                 IdField="Id"
                 ParentIdField="ParentId"
                 Sortable="true"
                 SortMode="@SortMode.Single"
                 FilterMode="@TreeListFilterMode.FilterMenu">

    <TreeListColumns>

        @*when disable sort, the filtering doesnt work*@
        <TreeListColumn Field="Owner" FieldType="@typeof(Avatar)" Title="Owner" Sortable="false"
                        FilterMenuType="@FilterMenuType.CheckBoxList">
            <Template>
                @{
                    var item = context as TaskItem;
                    <MyAvatar Avatar="item.Owner"></MyAvatar>
                }
            </Template>
        </TreeListColumn>

        @*when enable sort, the filter works but the sorting throw error*@
        <TreeListColumn Field="Owner" FieldType="@typeof(Avatar)" Title="Owner" Sortable="true"
                        FilterMenuType="@FilterMenuType.CheckBoxList">
            <Template>
                @{
                    var item = context as TaskItem;
                    <MyAvatar Avatar="item.Owner"></MyAvatar >
                }
            </Template>
        </TreeListColumn>

    </TreeListColumns>
</TelerikTreeList>

---

Updated snipped: https://blazorrepl.telerik.com/mQuxlWkD32B5eGay33

Answer 1

Make sure that the Field name is a primitive (value) type and not a full object. This is the field of the model used for filter and sort. Then, either remove the FieldType, or set it to the type of the Owner field, not to a different field.

Answer 2

Could it be that you actually want to bind the columns to the underlying primitive type you would like the comparison to be based on, rather than the Avatar object itself? To do that, you would like to update the Field and FieldType parameters to the appropriate nested property and type.

I've created a REPL snippet that demonstrates this (note I've added some dummy classes as they were missing from the initial snippet): https://blazorrepl.telerik.com/mQuxlWkD32B5eGay33