https://stackblitz.com/edit/angular-xqqm6evd?file=src%2Fapp%2Fapp.component.ts
I took the sample grid from the examples for Filter Menu, and then modified the UnitPrice to reflect a % instead of price.
I'm noticing something strange. When I try to filter, I need to filter on the raw value (so, for 4%, I need to filter on 0.04). This is fine and expected (although, bonus points if there is an option to have the filte reflect the display value, so user just needs to filter on "4").
However, when I start typing in 0.04, it seems that the filter component is resetting the field when enabling the "Filter" button if you're not fast enough. So, for example, you type in "0.0", the button enables, the component evaluates "0.0" and resets it to "0", losing the decimal. This is making it really frustrating to filter on these values.
If you do it fast enough, you can avoid this and filter as expected.
Any thoughts on how to fix this, or pereferably how to get it to filter based on the percentage itself?
1 Answer, 1 is accepted
Hi Ryan,
Thank you for the provided details and StackBlitz example.
The described behavior of the filter menu functionality of the Grid has been previously reported and discussed in several issues in our public GitHub repository, which I am linking for reference below:
- https://github.com/telerik/kendo-angular/issues/3835
- https://github.com/telerik/kendo-angular/issues/4253
In this line of thought, it was concluded that the explained behavior is expected since internally we set a default filterDelay of 500ms for the NumericFilterMenuComponent. This means that by default the Grid waits 500ms before building a filter descriptor with the entered value, so once a dot is typed after a 0, a filter descriptor with value 0 is created almost immediately. On that note, as you also mentioned, if you perform this action fast enough, the entered dot can be taken into account and the user can continue typing the rest of the value.
The behavior is explained in more detail in the following comment from the first GitHub issue linked above:
As a result of the above discussions, the following feature request was logged, suggesting an improvement in the current behavior of the Grid's filter menu:
I would suggest casting your vote for the above item since this will expand the public interest for this enhancement, which in turn will increase the chances of its future implementation.
As of now, the developer can work around the default filter menu behavior by implementing a kendoGridFilterMenuTemplate and setting a higher value for the filterDelay property of the NumericFilterMenuComponent. For demonstration, here is the StackBlitz example from your reply, modified with the suggested workaround approach:
Regarding the question about the values in the Grid being filtered based on the raw value, not the formatted one as percentage, this behavior is caused since the filtering functionality evaluates the actual data passed to the Grid (which in this case holds the number values as the initial decimals before being converted to percentages). The percentage representation is only a formatted text value, which is not the actual number that is used by the Grid.
On that note, in case you desire to filter directly by the representation of the percentage values, the easiest approach to achieve the requirement is to map the data array before it is passed to the Grid and multiple all percentage values by 100. Having done that, the format of the corresdonding Grid column should also be suitably modified, so the percentage sign will be displayed without the already mapped values being additionally converted to percentages.
In that way, the data will be filtered using the updated values and the values will be displayed in a percentage format. Here is a StackBlitz example dmeonstrating such a sample implementation:
I hope the provided information sheds some light on the matter. Let me know if any further questions arise.
Regards,
Zornitsa
Progress Telerik
Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!