Revision history [back]

To customize the options in GridColumnMenuCheckboxFilter of KendoReact grid for localization purposes, you can use the following approach:

1. Define a custom filter item template for the GridColumnMenuCheckboxFilter component. This template should include the translation of the options using your preferred localization library.

const customFilterItem = (props) => {
  const { text, checked, onChange } = props;
  const optionText = getTranslation(text); // Use your preferred localization library here

  return (
    <div className="k-item">
      <label className="k-label">
        <input
          type="checkbox"
          className="k-checkbox"
          checked={checked}
          onChange={onChange}
        />
        <span className="k-checkbox-label">{optionText}</span>
      </label>
    </div>
  );
};

1. Pass the custom filter item template to the GridColumnMenuCheckboxFilter component as a prop.

<GridColumnMenuCheckboxFilter
  field="status"
  data={data}
  filter="contains"
  onFilterChange={handleFilterChange}
  itemRender={customFilterItem} // Pass the custom template here
/>

1. Use your localization library to define the translations for the filter options. For example, with i18next library:

const resources = {
  en: {
    translation: {
      status: {
        Active: 'Active',
        Inactive: 'Inactive',
        Pending: 'Pending'
      }
    }
  },
  fr: {
    translation: {
      status: {
        Active: 'Actif',
        Inactive: 'Inactif',
        Pending: 'En attente'
      }
    }
  }
};

1. Define a function that retrieves the translation for a given key from the current language resources.

function getTranslation(key) {
  return i18next.t(`status.${key}`);
}

With this approach, the filter options will be localized according to the current language, and you can use any localization library that you prefer.