Custom Template for TelerikCheckBoxListFilter

[Adrian]

I have a Telerik Blazor Grid and one of the columns is displaying values from an enum, the enum is defined as:

01.[Serializable]
02.public enum ClientType
03.{
04.    [EnumOrder(1)]
05.    [Description("Fleet")]
06.    Fleet = 1,
07.
08.    [EnumOrder(2)]
09.    [Description("Manufacturer")]
10.    Manufacturer = 2,
11.
12.    [EnumOrder(3)]
13.    [Description("Manufacturer (Restricted)")]
14.    ManufacturerRestricted = 3,
15.
16.    [EnumOrder(4)]
17.    [Description("Other")]
18.    Other = 4
19.}

 

I wanted to be able to display the value stored in the Description attribute of the enum rather than the enum value as the Description attribute value is more readable.  I was able to do this by using an enum extension method and calling that in a GridColumn template like so:

1.<GridColumn Field="@(nameof(ClientInfo.ClientType))" Width="100px" Filterable="true" Groupable="false">
2.    <Template>
3.        @((context as ClientInfo)?.ClientType.ToDescription())
4.    </Template>
5.</GridColumn>

 

I then looked at adding a checkbox filter to this column so that all the possible enum values would be shown as checkboxes.  I have managed to do this by adding a FilterMenuTemplate with a TelerikCheckBoxListFilter to the GridColumn like so:

01.<GridColumn Field="@(nameof(ClientInfo.ClientType))" Width="100px" Filterable="true" Groupable="false">
02.    <FilterMenuTemplate Context="context">
03.        <TelerikCheckBoxListFilter Data="@GridFilterOptionsService.ClientTypeList"
04.                                   Field="@(nameof(ClientTypeFilterOption.ClientType))"
05.                                   @bind-FilterDescriptor="@context.FilterDescriptor">
06.        </TelerikCheckBoxListFilter>
07.    </FilterMenuTemplate>
08.    <Template>
09.        @((context as ClientInfo)?.ClientType.ToDescription())
10.    </Template>
11.</GridColumn>

 

This functions and correctly filters the grid based on the filter values checked.  Unfortunately I'm not able to apply the same enum extension method as to display the Description attribute value from the enum for the checkboxlist items Text item.

The attached picture shows the checkboxlist rendering the enum values and not the Description attribute values.

I have tried the following but it doesn't work:

01.<GridColumn Field="@(nameof(ClientInfo.ClientType))" Width="100px" Filterable="true" Groupable="false">
02.    <FilterMenuTemplate Context="context">
03.        <TelerikCheckBoxListFilter Data="@GridFilterOptionsService.ClientTypeList"
04.                                   Field="@(nameof(ClientTypeFilterOption.ClientType))"
05.                                   @bind-FilterDescriptor="@context.FilterDescriptor">
06.            <Template>
07.                @((context as ClientTypeFilterOption)?.ClientType.ToDescription())
08.            </Template>
09.        </TelerikCheckBoxListFilter>
10.    </FilterMenuTemplate>
11.    <Template>
12.        @((context as ClientInfo)?.ClientType.ToDescription())
13.    </Template>
14.</GridColumn>

 

Is there a way I can achieve displaying the enum Description attribute values in the TelerikCheckBoxListFilter like I can in the GridColumn Template ?

 

 

 

[Nadezhda Tacheva]

Hi Adrian,

You can also use the DisplayName attribute of the enum to set the desired display names for its values.

We currently have an opened bug report in our public feedback portal - Enum DisplayName attributes are ignored. Once it is fixed, you can use that for your scenario instead of setting the text that you want to display in the Description parameter of the enum. If you define it in the DisplayName attribute, it will be automatically read by the component and displayed accordingly.

I added a vote your behalf to increase the bug report priority. You can also subscribe to receive email notifications when its status changes ( this is the best way to know when a certain bug is fixed as we announce such information in the portal ).

In the meantime, an approach you might consider is trying a custom filter menu - you can find more details and examples of such implementation in this article as well as in this live demo. It will give you more flexibility to work with the content you want to display in the filter menu.

If any further questions appear, please do not hesitate to contact us.

Thank you for choosing Telerik UI for Blazor!

Regards,
Nadezhda Tacheva
Progress Telerik