Kendo React Grid Filter Issue with Turkish Characters "i"

[irfan]

I'm using Kendo React Grid (@progress/kendo-react-grid@9.1.0) with client-side filtering. One of my columns contains Turkish words like "CEVİZ" (with capital dotted İ, U+0130). I noticed a strange behavior when filtering:

• Typing "cevi" in the filter works correctly and returns "CEVİZ"

• Typing "ceviz" does not return any results

• Typing "CEVİZ" works

• Typing "iz" does not return results

• Similar issues happen with words like "SİDE" → "si" works but "sid" doesn't

It seems this is related to how JavaScript lowercases "İ" into "i\u0307" (with a combining dot), which causes unexpected behavior in includes() filtering.

I have lowercased to column data from "CEVİZ"  to "ceviz" before displaying but still have same problem. 

Questions:

1. Does the Kendo Grid's built-in client-side filtering normalize or handle Turkish casing (e.g., toLocaleLowerCase("tr"))?

2. Is there a recommended way to override or customize the string filtering logic to properly handle Turkish characters like İ?

3. If I provide a custom filter function, how can I ensure it's properly integrated for all relevant columns?

Thanks in advance!

[Filip]

Hello, Irfan,

The KendoReact Grid currently does not have a mechanism for handling the Turkish casing out of the box, however a possible approach I can suggest is to create a custom filtering function that will normalize or handle the Turkish casing. This custom logic can be applied by processing the data in the onFilterChange or onDataStateChange event handlers when the Grid is in controlled mode.

In case the issue persists can you please send me a runnable example which matches your implementation and reproduces the undesired casing behavior? This will enable me to modify the sample so that you can transfer the logic to your real-world app.

Regards,
Filip

[irfan]

Hi, Filip,

Here is an example with sample products we might use. 
"cevi" works while "ceviz" not

const sampleProducts = [
  {
    ProductID: 1,
    ProductName: 'Ceviz',
    UnitPrice: 18,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 8, 20),
  },
  {
    ProductID: 2,
    ProductName: 'CEVİZ',
    UnitPrice: 19,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 7, 12),
  },
  {
    ProductID: 3,
    ProductName: 'CEVIZ',
    UnitPrice: 10,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 8, 26),
  },
  {
    ProductID: 4,
    ProductName: 'cevız',
    UnitPrice: 22,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 9, 19),
  },
  {
    ProductID: 5,
    ProductName: 'SIDE',
    UnitPrice: 21.35,
    Discontinued: true,
    FirstOrderedOn: new Date(1996, 7, 17),
  },
  {
    ProductID: 6,
    ProductName: 'sıde',
    UnitPrice: 25,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 9, 19),
  },
  {
    ProductID: 7,
    ProductName: 'SİDE',
    UnitPrice: 30,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 7, 22),
  },
  {
    ProductID: 8,
    ProductName: 'side',
    UnitPrice: 40,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 11, 1),
  },
];


import * as React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import sampleProducts from './gd-sample-products';

const App = () => {
  return (
    <Grid
      style={{ height: '365px' }}
      dataItemKey="ProductID"
      data={sampleProducts}
      autoProcessData={true}
      navigatable={true}
      filterable={true}
    >
      <Column field="ProductID" title="ID" filterable={false} width="40px" />
      <Column field="ProductName" title="Product Name" width="240px" />
      <Column
        field="FirstOrderedOn"
        title="First Ordered On"
        width="220px"
        filter="date"
        format="{0:d}"
      />
      <Column
        field="UnitPrice"
        width="180px"
        title="Unit Price"
        filter="numeric"
        format="{0:c}"
      />
      <Column field="Discontinued" filter="boolean" />
    </Grid>
  );
};

export default App;

[Filip]

Hello, Irfan,

Thank you for the provided code I was able to observe the issue in which cevi works but ceviz does not. I was able to resolve it by creating a function accessor that returns the normalized field value, here is the runnable example:

• https://stackblitz.com/edit/react-x7ek5jkx-oswrvgry?file=app%2Fapp.tsx

Please give this approach a try and let me know in case the issue still persists with this implementation and I will gladly assist further.

Regards,
Filip

[irfan]

Hi, 

This is greate and it works with filterable=true which enables default search bar.

however when i add custom filter menu it does not work as expected. it seems it is because "field" could not be passed to  filters as function. With default filter searchbar i am able to logs to console field item on every change, but it does not in custom filter menu.  So I tought it did not pick up the function for field that normalizes item value thus final data does not meet requirements. 

Here is the custom menu i have implemented. 

 

import {
  GridColumn,
  Grid,
  GridColumnMenuFilter,
  GridColumnMenuGroup,
  GridColumnMenuProps,
  GridColumnMenuSort,
  GridCustomCellProps,
  GridFilterChangeEvent,
  GridGroupChangeEvent,
  GridToolbar,
} from '@progress/kendo-react-grid';



      <GridColumn
        field="ProductName"
        columnMenu={ColumnMenu}
        title="Product Name"
        width="240px"
      />



const ColumnMenu = (props) => {
  return (
    <>
      <GridColumnMenuSort {...props} />
      <GridColumnMenuFilter {...props} />
      <GridColumnMenuGroup {...props} />
    </>
  );
};

[Filip]

Hi, irfan,

When using a columnMenu, I can suggest filtering only on pre-normalized string field names that exist in the data and normalizing the user input. Here is the updated example that showcases this approach with a columnMenu component:

• https://stackblitz.com/edit/react-x7ek5jkx-9eqhvrzf?file=app%2Fapp.tsx

Let me know in case the issue still persists and further assistance is required.

Regards,
Filip