KendoReact grid localize the GridColumnMenuCheckboxFilter options

Question

I have a KendoReact grid that has a status column. I can localize the grid cell content and I can localize the column menu filter options. However, as the data is in English the filtering in anything other than English does not work. Is there any way to create a value & name. So that the name is displayed but the value remains in English so that the filtering can succeed?

score 1 · Answer 1 · answered Mar 30 '23 at 14:59

It's not possible to do at the moment. I was dealing with the same problem and tried couple approaches, but none worked.

On my second try, I sent translated labels to the GridColumnMenuCheckboxFilter and using onFilterChange method I captured the event and send the english labels back for filtering. This works fine - filter labels are translated and filtering works, thre is only one problem left. The component can't match the translated label and check it's checkbox so the checkboxes are left unchecked.

There is a way to deal with it, but mind it's not nice (proper) way to do it and it should be only used as a temporary solution. Leave it as it is in English and than right after the component is rendered rename the labels to the desired language.

In my case it works as follows:

I call the component from the list component, something like this, where labelsCapitalized are original labels in English. I use React intl for translations.

<GridColumn
  cell={...someCode}
  columnMenu={(props) => ColumnMenuCheckboxFilter(props, labelsCapitalized)}
  field="fieldName"
  title="title"
  width="someWidth"
/>

The component

<GridColumnMenuCheckboxFilter
  {...props}
  data={labelsCapitalized}
  expanded={true}
  searchBox={() => null}
  onExpandChange={handleExpandChange()}
/>

method handleExpandChange()

const handleExpandChange = () => {
  // check first with some custom function if the language is not English 
  if (isNotEnglish)
    { setTimeout(() => { // wait a while to allow render
      // get all labels
      const labels = document.querySelectorAll('.k-checkbox-label');
      // take all except the first which is 'select all'
      // and is usually already translated by Kendo component
      const [, ...rest] = labels;
      rest.forEach((filter, index) => {
        // here you'll have to use your own way to translate
        if (filter.textContent === labelsCapitalized[index][labelKey]) {
          rest[index].textContent = intl.formatMessage(
            messages[labelsCapitalized[index][labelKey].toLowerCase()]
          );
        }
      });
    }, 250);
  }
};

KendoReact grid localize the GridColumnMenuCheckboxFilter options

1 Answers1