Kendo React Grid: How to customize the column menu filter specifically for date and its filtering

Question

I have a component with a few columns. One of them is a date column. Now, I want to filter that column from the column menu filter but I'm unable to customize it. I want the filter to have a custom format like MM/dd/yy or dd/MM/yy (both placeholder and value) as per my locales. Can anybody guide me on how to do this? As the generic column filter menu is giving me month/day/year (placeholder) and same date format. Posting some bit of the code here.

Component.jsx

import { Grid } from '@progress/kendo-react-grid';
import { GridColumnMenuFilter } from '@progress/kendo-react-grid';

<Grid useColumnFilterMenu>
    <Column
        field="joinDate"
        title={locale('joinDateTitle')}
        format={`{0:${locale('joinDateFormat')}}`}
        filter="date"
        columnMenu={props => {
            <GridColumnMenuFilter {...props} />
        }
     />
....
....
</Grid>

Here, joinDateFormat - is the MM/dd/yy or dd/MM/yy format. This is showing me the results from the API call perfectly fine. But I'm struggling with the column filter and its placeholder and date format as per my locale changes.

Answer 1

We can use the filterUI prop of the GridColumnMenuFilter and achieve this.

Answer 2

If it's just the format that is the issue and you want it to match your locale, you can use Kendo IntlProvider: https://www.telerik.com/kendo-react-ui/components/intl/i18n/

Here is a functional StackBlitz demonstrating this approach: https://stackblitz.com/edit/react-o5gz9j?file=app%2Fmain.tsx

Here is another approach demonstrating how you can set DateInputPropsContext to achieve a similar outcome: https://stackblitz.com/edit/react-3pamhz?file=app%2Fmain.tsx

Answer 3

Best possible way to accomplish is to use NumericTextBoxPropsContext.

First we need to decide the format and another properties for NumericTextBox Component.

const NumericTextBoxProps = React.useCallback(
    (numericTextBoxProps) => ({
      ...numericTextBoxProps,
      format: '##'
    }),
    []
  );
  return props;

Then we can use this in Kedno Grid or anywhere you have used this Numeric Text Box from Kendo UI in your application.

import { NumericTextBoxPropsContext } from '@progress/kendo-react-inputs';

const App = () => {
  return (
    <div>
      <NumericTextBoxPropsContext.Provider value={NumericTextBoxProps}>
        <Grid></Grid>
      </NumericTextBoxPropsContext.Provider>
    </div>
  )
}

This will help you format Numeric Text Box Filter in the Grid or in general Numeric Text Box anywhere in the Application based on how we wrap it.

Similarly we can do this for all the Filters like Dates Text box as well.