Grid number filter precision

[Jie]

Hi,

 

If a Grid column is using number filter, its precision can only be 0.001. Is there a way to increase that?

See this Kendo React official example, the "Unit Price" filter can only take 0.001, not able to take 0.0001.

https://www.telerik.com/kendo-react-ui/components/grid/filtering/

 

I tried changing the column format to "{0:n6}", but it only affect the grid cell, not the filter.

 

Thanks,

Jie

 

[Yanko]

Hello, Jie,

Yes, you can increase the precision of the filter. You can achieve that by utilizing the `filterCell` property of the Grid Column. This allows you to use a custom input field inside the filter to set its format:

      <NumericTextBox
          format="n6"
          width="110px"
          onChange={onChange}
          value={props.value}
        />

You can read more about custom filter cells in this article from our documentation:

• https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells 

I have prepared an example for you that displays the mentioned approach:

• https://stackblitz.com/edit/react-rxmrpy?file=app%2Fapp.jsx,app%2FPriceFilterCell.jsx 

Please let me know if I can provide further help on the matter.

Regards,
Yanko
Progress Telerik

[Jie]

Hi Yanko,

The problem is that I want to use column header menu too, like in the official document - https://www.telerik.com/kendo-react-ui/components/grid/interactivity/column-menu/.

The filterCell prop doesn't seem to work anymore with header menu. The filter is only determined by filter prop, i.e, 

filter={"numeric"}

Thanks,

Jie

[Yanko]

Hello, Jie,

You can make changes to the header menu of a column with the `columnMenu` property. It allows adding a custom header menu to the column, inside it you can add a `GridColumnMenuFilter` with a `filterUI` prop that receives a custom component to display inside the filter:

columnMenu={(props)=><GridColumnMenuFilter {...props} filterUI={CustomFilterUI} /> }

I changed the example from my previous answer so that it contains a header menu with a NumericTextBox which comes from the CustomFilterUI component:

• https://stackblitz.com/edit/react-rxmrpy?file=app%2Fapp.jsx,app%2FCustomFilterUI.jsx 

Regards,
Yanko
Progress Telerik

[Jie]

Hi Yanko,

That makes sense. If I want to have all the features in the original numeric filter, such as a dropdown list with options like "Is equal to" (see the attached screenshot), I will need to implement that in the custom filter, correct?

Thanks,

Jie

[Yanko]

Hello, Jie

Yes, you are correct if you want the mentioned options you need to implement a custom filter. I suggest using the source code of the default filter if you seek similar behaviour. Here is an article from our documentation that explains how to obtain the source code: 

• https://www.telerik.com/kendo-react-ui/components/installation/source-code/ 

You can find the code files from the columnMenu inside this directory once you have cloned the repo: 

../kendo-react-private/packages/grid/src/columnMenu 

If you need further help, please open a private ticket in our portal, so we can provide you with further help:

• https://www.telerik.com/account/support-center/contact-us/technical-support 

Regards,
Yanko
Progress Telerik