Completed
Last Updated: 13 Jul 2020 07:41 by ADMIN
Release 2.15.0
René
Created on: 25 Nov 2019 07:47
Category: Grid
Type: Feature Request
22
Filter Enum values

If I'm filtering a column containing enum values I expect a dropdown of available values to choose from (as it is the case when filtering a grid using telerik UI for .net core).

Unfortunately with Blazor Grids the filter for Enums displays a numberbox.  This is not usable since the user does not know the IDs for the enum values.

Please let me know how I can get the filter to let the user choose from the available enum values!

28 comments
ADMIN
Marin Bratanov
Posted on: 13 Jul 2020 07:41

Hi Larry,

My best guess is that during the serialization/deserialization the type of the enum in the request or the response is lost. If you are using your own code to do that, you may need to explicitly cast the Value of the filter from the request, or parse it from its string representation in the serialized data for the response.

 

Regards,
Marin Bratanov
Progress Telerik

Larry Ledden
Posted on: 13 Jul 2020 02:24

I can't seem to get the proper results with an enum filter if I manually page data to a grid.  I have a grid attached to a table with one column containing an Enum.  This grid was initially setup to read the entire db table into an array bound to the grid.  In this configuration, the Enum drop down filter works properly.  However, if I modify the structure so that it uses manual paging with DataEnvelope I get an error in the browser when selecting a drop down item as shown..

blazor.webassembly.js:1 System.InvalidOperationException: The converter specified on 'Telerik.DataSource.FilterDescriptor.Value' is not compatible with the type 'FulfillmentModule.Shared.Models.SRStatus'.

Any suggestions as to what I'm doing wrong?

Christian
Posted on: 07 Jul 2020 10:33

Hi Marin,

it's awesome that this feature is available now.

For all those who want to implement a localized dropdown like I needed to do, you can take a look at the following code (It's attached as zip file as well):

 

@using System
@using System.Collections.Generic
@using System.Threading.Tasks
@using Telerik.Blazor.Components
@using Telerik.Blazor
@using Telerik.DataSource

<TelerikGrid Data="@this.UserData" Pageable="true" Sortable="true" FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field="@(nameof(User.Id))" Title="@this.Localizer["Id"]" />
<GridColumn Field="@(nameof(User.ClientType))" Title="@this.Localizer["ClientType"]">
<FilterCellTemplate>
@{
this.FilterCellContext = context;
<TelerikDropDownList Data="@this.ClientTypes" TextField="Text" ValueField="Value" Enabled="true" @bind-Value="this.SelectedClientType" OnChange="@this.OnClientTypeChanged">
</TelerikDropDownList>
}
</FilterCellTemplate>
<Template>
@{
var item = context as User;
<div>@this.Localizer[item.ClientType.ToString()]</div>
}
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>

@code {
public class User
{
public Guid Id { get; set; }

public ClientType ClientType { get; set; }
}

public enum ClientType
{
Normal,
Special
}

public class ComboBoxData<T>
    {
        public T Value { get; set; }

        public string Text { get; set; }
    }

protected override async Task OnInitializedAsync()
{
foreach (ClientType clientType in Enum.GetValues(typeof(ClientType)))
{
this.ClientTypes.Add(
new ComboBoxData<ClientType>
{
Value = clientType,
Text = this.Localizer[clientType.GetDescription()]
});
}
}

protected async Task OnClientTypeChanged(object state)
{
var filter1 = this.FilterCellContext.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

if (filter1 == null)
{
return;
}

filter1.Value = this.SelectedClientType;
filter1.Operator = FilterOperator.IsEqualTo;
this.FilterCellContext.FilterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.And;
await this.FilterCellContext.FilterAsync();
}

    protected IEnumerable<DtoReadUser> UserData { get; set; }

protected List<ComboBoxData<ClientType>> ClientTypes { get; set; } = new List<ComboBoxData<ClientType>>();

    protected ClientType SelectedClientType { get; set; }

    protected FilterCellTemplateContext FilterCellContext { get; set; }

[Inject]
    protected IStringLocalizer<Users> Localizer { get; set; }
}

 

Best regards,

Christian

Attached Files:
ADMIN
Marin Bratanov
Posted on: 26 Jun 2020 08:20

I'm happy to hear you like the feature, guys :)

Localization of enums is something your view-model should do. Take a peek at the following KB on binding dropdowns to enums to see how to build the appropriate data source where you can plug your localization: https://docs.telerik.com/blazor-ui/knowledge-base/dropdown-kb-bind-to-enum. For filtering, you can plug that into the filter templates we now have: https://docs.telerik.com/blazor-ui/components/grid/templates/filter. These two features let you have per-component and even per-column flexibility in the display.

 

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.
Kasimier Buchcik
Posted on: 25 Jun 2020 15:41
Thanks for the enum filter!

I second Christian's extended request: Localization of enums (or any other objects) would be super; not only for the grid's filter but also for DropDownList, ComboBox, etc.

Currently I'm trying to wrap enums in a tiny view model where I have a text property which gets its value from an attached localizer.

It would be helpful if we could localize individually per-component. Individually, because the text of an enum can differ based on the context it is displayed in.
Maybe via a localizer or a localization function, or an scenario specific identifier to be used with a global per-type localizer, or a mixture of those?
René
Posted on: 25 Jun 2020 09:23

Thanks so much for releasing this!

We have desperately been waiting for this feature.

Regards,

René

ADMIN
Marin Bratanov
Posted on: 12 Jun 2020 08:19

Hello Peter,

Yes, it will work, here is something that would get generated - it is important to keep in mind that the string query is not strongly typed and depends on the values, it is up to the backend to parse it.

$count=true&$filter=(Role%20eq%20%27Employee%27)&$skip=0&$top=10

where "Role" is the name of the field in the model, "eq" stands for the "equals" operator and "Employee" is the chosen value from the dropdown, and the "%20" are encoded whitespaces.

 

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.
Peter
Posted on: 10 Jun 2020 15:10

Thanks, Marin

 

Could you please confirm that filter will be compatible with OData? E.g.

someProperty eq MyApp.Sex`Male`

 

Thanks

ADMIN
Marin Bratanov
Posted on: 10 Jun 2020 12:32

Hi all,

With our next release enum filtering and editing will come out of the box - with a dropdown for a filter/editor component that lists all possible members.

You can preview a KB article that will show an example here: https://github.com/telerik/blazor-docs/blob/master/knowledge-base/grid-filter-edit-enum.md (it will be live in our actual docs with the upcoming 2.15.0 release)

 

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.
René
Posted on: 05 May 2020 08:16
I'm really looking forward to this.
Peter
Posted on: 05 May 2020 08:13

Excellent. Thank you, Marin.

 

 

ADMIN
Marin Bratanov
Posted on: 05 May 2020 08:03

I'm happy to say that the priority of this *feature* was increased and we will try to implement it for 2.15.0 together with the filter templates (which is how the majority of grid let you handle enum filtering, even in 10+ year old suites).

 

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.
Paul Shearing
Posted on: 04 May 2020 14:14
I agree with Peter, this is a serious issue. I love Blazor and the control that it gives as well as the excellent performance but I am now considering having to revert to my old development toolset: CodeOnTime for producing a data maintenance application. I'm gutted - but a consistent UI is essential.
Peter
Posted on: 04 May 2020 10:53

This is *really* hurting us now. We've had a complaint from management that we are unable to filter on transaction statuses (which is essential) without having to have an inconsistent user-interface (which is a poor user experience and is confusing users).

Critical bugs in existing components should be addressed before the development of new components.

 

ADMIN
Marin Bratanov
Posted on: 01 May 2020 07:36

Hello Peter,

I agree with you that filtering on enums out of the box would be a great addition. The first feature that will enable you to do that is the filter templates and they will, hopefully, be available in the early summer.

I have raised the priority of this task as much as I can and I can only suggest you click the Follow button to get email notifications for status updates.

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.
Peter
Posted on: 30 Apr 2020 14:44

I cannot stress enough how important it is for us to have the ability to filter enum values, whilst maintaining a standard look throughout the app (i.e. the filtering is done in the grid, not next to it).

It's also very important that the OData filter works with it too. I thought this was a bug, not an omission. Please make it high priority, this basic need is for more common than some of the more fancy features being added.

ADMIN
Marin Bratanov
Posted on: 30 Apr 2020 10:08

Hello Paul,

Our grid is about feature complete and offer the majority of features needed in a grid. We also have an extremely flexible data binding and requests mechanism that allows making highly performant data queries on the server so the views can work with fewer data items. Our Grid State also exposes a lot of configuration options - it lets you do with code what the user can do with the mouse.

We are constantly making enhancements on the grid and you can monitor our roadmap in the following page: https://www.telerik.com/support/whats-new/blazor-ui/roadmap.

I agree with you that this feature would be a great addition, yet so are many others, and we need to prioritize tasks. For example, if you sort the feedback we have by popularity (https://feedback.telerik.com/blazor?listMode=Popular&typeId=2&pageIndex=1), you will see that most of the most popular requests are already done, or will soon be. This particular feature is at the end of page 2 at the current moment. This means that it will get its turn, but we need to do tasks with higher priority first.

All that said, you can also add your custom enum filter in the header template: https://docs.telerik.com/blazor-ui/components/grid/templates#header-template (for example, a dropdownlist bound like this: https://docs.telerik.com/blazor-ui/knowledge-base/dropdown-kb-bind-to-enum). Once the filter templates arrive (which will be relatively soon), you will be able to do this so it matches the reset of the filters: https://feedback.telerik.com/blazor/1407773-custom-filter-components-filter-template

You can also Follow the implementation of multi checkbox filter here: https://feedback.telerik.com/blazor/1434449-add-option-for-multi-checkbox-filter-on-the-grid.

I've added your Vote on your behalf for those two features that will, eventually, get done as well.

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.
Paul Shearing
Posted on: 29 Apr 2020 23:55

"Unplanned"? REALLY? This is essential in a modern web app.

The competition has it already: https://demos.devexpress.com/blazor/GridFilterRow

Having a separate drop-down filter outside the grid means that there are two different ways of filtering the data and you have to explain to customers/users why this is so and then again as to why some columns are filtered this way and others are not.

Please implement this, and an Excel-style of multi-selection using a dropdown list with check-boxes.

Regards,

Paul

ADMIN
Marin Bratanov
Posted on: 17 Feb 2020 15:28

Hi Peter,

We are aware of this issue and I made a public page where you can Follow it: https://feedback.telerik.com/blazor/1454068-exception-in-wasm-on-scroll-or-scrollbar-click-when-a-popup-is-open.

In the meantime you can consider adding a dropdown bound to enums above the grid so you can filter it in a fashion similar to this: https://feedback.telerik.com/blazor/1440872-search-panel

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Peter
Posted on: 17 Feb 2020 15:12

I *really* need enum filtering too.

 

Also, when I open the filter menu, and then scroll my page down so the filter menu disappears, I get the following exception:

blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
l.printErr @ blazor.webassembly.js:1
put_char @ dotnet.js:1
write @ dotnet.js:1
write @ dotnet.js:1
___syscall4 @ dotnet.js:1
(anonymous) @ wasm-00d61dde-538:1
(anonymous) @ wasm-00d61dde-4447:1
(anonymous) @ wasm-00d61dde-2434:1
(anonymous) @ wasm-00d61dde-2432:1
(anonymous) @ wasm-00d61dde-4362:1
(anonymous) @ wasm-00d61dde-5668:1
(anonymous) @ wasm-00d61dde-6199:1
(anonymous) @ wasm-00d61dde-1432:1
(anonymous) @ wasm-00d61dde-635:1
(anonymous) @ wasm-00d61dde-4992:1
(anonymous) @ wasm-00d61dde-3248:1
(anonymous) @ wasm-00d61dde-1328:1
(anonymous) @ wasm-00d61dde-337:1
(anonymous) @ wasm-00d61dde-2630:1
(anonymous) @ wasm-00d61dde-5927:1
(anonymous) @ wasm-00d61dde-5588:1
(anonymous) @ wasm-00d61dde-6199:1
(anonymous) @ wasm-00d61dde-1432:1
(anonymous) @ wasm-00d61dde-635:1
(anonymous) @ wasm-00d61dde-4992:1
(anonymous) @ wasm-00d61dde-3248:1
(anonymous) @ wasm-00d61dde-1328:1
(anonymous) @ wasm-00d61dde-438:1
(anonymous) @ wasm-00d61dde-1737:1
(anonymous) @ wasm-00d61dde-3497:1
Module._mono_wasm_invoke_method @ dotnet.js:1
call_method @ dotnet.js:1
(anonymous) @ dotnet.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
l @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
value @ telerik-blazor.js:1
value @ telerik-blazor.js:38
value @ telerik-blazor.js:38
(anonymous) @ telerik-blazor.js:38
(anonymous) @ telerik-blazor.js:38
Show 11 more frames
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Unknown edit type: 0

ADMIN
Marin Bratanov
Posted on: 22 Jan 2020 14:15

Hello Christian,

At this point, enum filtering is not implemented, the grid treats the enum like the underlying integer.

Perhaps when custom filtering becomes available, you will be able to localize as desired, I would expect that the out-of-the-box feature would, at least initially, use the .ToString() of the enum name:

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Christian
Posted on: 22 Jan 2020 14:04

We need this feature to filter enum values as well. (I have already voted for it).

I don't know if this is related or already planned, but what if one wants to localize the enum values in the filter (and the grid as well)? Is this already possible using a converter (that inherits from IValueConverter) like it can be done e.g. in WPF?

 

Best regards,

Christian

ADMIN
Marin Bratanov
Posted on: 16 Jan 2020 12:18

Also, on a multi checkbox filter, you may want to Vote for this one: https://feedback.telerik.com/blazor/1434449-add-option-for-multi-checkbox-filter-on-the-grid

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 16 Jan 2020 12:09

Thank you for your feedback, Werner.

You may want to also Follow the implementation of a MultiSelect component: https://feedback.telerik.com/blazor/1429681-multiselect-component

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Werner
Posted on: 16 Jan 2020 11:56

I think a complete implementation should contain:

For enumeration values:

* Filter: combo box with enumeration values with item checkboxes to allow filter on one or more enumeration values

* Display: name of enumeration value

* Editing: Single selection combo box (filterable by input nice to have)

For enumeration flags

* Filter: combo box with enumeration values with item checkboxes to allow filter on one or more flags

? Display: list of flags (e.g. comma separated)

* Editing: Multi selection combo box

 

ADMIN
Marin Bratanov
Posted on: 15 Jan 2020 09:50

Hello Werner,

 I imagine that a dropdown with the Enum values will be the filter. Maybe it could be a combo box with filtering too. We'll keep this in mind when reviewing this item.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Werner
Posted on: 14 Jan 2020 20:52
Important issue for me, too. Please also consider a meaningful input in form of a combo box, too.

Not Logged in

ADMIN
Marin Bratanov
Posted on: 25 Nov 2019 08:20

Hi René,

I moved this request to the feedback portal so we can gather the community interest and feedback on it. Here's a link so you can Follow its implementation: https://feedback.telerik.com/blazor/1443614-filter-enum-values.

At the moment, the only other idea I can offer is filtering through a dropdown outside of the grid, like in your other request: https://feedback.telerik.com/blazor/1440872-search-panel.

You may also find interesting this request as it is likely that it will let you provide your own list of data for the checkbox filter: https://feedback.telerik.com/blazor/1434449-add-option-for-multi-checkbox-filter-on-the-grid.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor