Translate filterable cell in grid

[J]

I have a grid with a filterable cell. A translate pipe is used in its template - this causes that the filter does not work properly, as it recognizes the original values and not the translated ones.

        {
            field: "xxx",
            title: "foo",
            width: "120px",
            template: "{{ 'yyy' | translate }}",
            filterable: {
                cell: {
                    showOperators: false,
                    operator: 'contains',
                    suggestionOperator: "contains"
                }
            }
        },

Is there any way to get the filter values translated as well?

This question is similar to https://www.telerik.com/forums/grid---custom-filtering-function-for-a-particular-column, except that this is related to Kendo for jQuery.

[Eyup]

Hello,

 

Thank you for reaching out.

Filtering in the Kendo UI for jQuery Grid works on the raw data values, not on the rendered or translated values shown in the template. When you use an Angular pipe like {{ 'yyy' | translate }} in the column template, the filter input still matches against the original values in your data source—not the translated text displayed in the cell.

Limitations With Angular Pipes

Angular pipes and Kendo UI for jQuery do not integrate natively. The template you provided uses Angular syntax, but Kendo UI for jQuery expects JavaScript functions for templates and does not process Angular pipes. As a result, filtering will not work with translated values unless you handle translation at the data level or implement custom filtering logic.

Solutions

1. Pre-Translate Data Source

Before initializing the Grid, translate the relevant data fields in your data source. This way, both the Grid display and the filter will operate on the translated values.

2. Custom Filter Logic

You can use the columns.filterable.cell.template option to create a custom filter cell and handle filtering based on translated values. Here’s an example using a JavaScript translation function:

var data = [
  { xxx: "originalValue1" },
  { xxx: "originalValue2" }
];

// Example translation function
function translate(value) {
  // Replace this with your actual translation logic
  var translations = {
    "originalValue1": "translatedValue1",
    "originalValue2": "translatedValue2"
  };
  return translations[value] || value;
}

$("#grid").kendoGrid({
  dataSource: {
    data: data
  },
  columns: [
    {
      field: "xxx",
      title: "foo",
      width: "120px",
      template: function(dataItem) {
        return translate(dataItem.xxx);
      },
      filterable: {
        cell: {
          template: function(args) {
            args.element.kendoAutoComplete({
              dataSource: data.map(item => translate(item.xxx)),
              filtering: function(e) {
                e.filter.operator = function(item, value) {
                  return item.toLowerCase().indexOf(value.toLowerCase()) >= 0;
                }
              }
            });
          },
          showOperators: false,
          operator: "contains",
          suggestionOperator: "contains"
        }
      }
    }
  ],
  filterable: {
    mode: "row"
  }
});

• https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/grid-ignore-diacritics-when-filtering

Next Steps

I am under the impression that this case targets Kendo UI for Angular and not UI for jQuery. If this is correct, I can forward this thread to them or feel free to open a new Support Ticket or Forum Thread for the Kendo Angular Product with this question.

 

Regards,
Eyup
Progress Telerik