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

Filtering option for enum type field does not work as similar to string(Contains)

1 Answer 1719 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Surendher
Top achievements
Rank 1
Surendher asked on 11 Dec 2019, 07:53 AM

I have a enum type field -(eg: CustomerState). And I have binded to kendo grid to dispay the text value of the enum as below,

<kendo-grid-column field="customerState" title="{{'LABELS.customerState' | translate}}" width="100">
        <!-- <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.customerState | enumTranslate: customerState | async }}
        </ng-template> -->

         <ng-template kendoGridCellTemplate let-element>
          {{CustomerState[element.customerState]}}
        </ng-template>

      </kendo-grid-column>

I have set filterable="menu" in the grid. So I see a default filtering option in the UI page with Contains search as default. 

Problem is when I search the text value of the field(eg: Inactive state), I get no results. but when I search as 0 or 1 or 2, I get the filtered result.

So is there any easier alternative to filter based on a particular enum value from all list of records in the grid?

 

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 12 Dec 2019, 09:51 AM

Hi Surendher,

The observed behavior is caused by the fact that by default enum types provide numeric values while the Grid default string filtering UI tries to match strings.

A possible approach is to define a custom Enum with string values matching the desired property names, for example:

https://stackblitz.com/edit/angular-4wlttz?file=app/app.component.ts

This way values will be treated and processed like strings.

Alternatively, you can use a custom reusable filter component and provide a custom UI or a DropDownList with values - all possible enum values, and user-friendly texts:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-row-filtering // dropdownlist

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-multi-checkbox-menu-filtering // custom multicheckbox

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Surendher
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or