Kendo Multiselect Clear Button Localization

[MirAlbertioni]

I'm submitting a...

• Bug report

Current behavior

Kendo's multiselect does not have support for changing the "Clear button" localization.

In Angular for an example you can do

<kendo-multiselect [data]="listItems" [(ngModel)]="value">
     <kendo-multiselect-messages
          clearTitle="Custom clear button text"
          noDataText="Custom no data text">
     </kendo-multiselect-messages>
</kendo-multiselect>

Expected behavior

Support for localization

Minimal reproduction of the problem with instructions

What is the motivation or use case for changing the behavior?

Fully support for localization

Environment

Package versions:

"@progress/kendo-react-dropdowns": "3.11.0",

System: React: 16.12.0

[Xizario]

It is set using the dropdowns.clear message string, that is passed by the intl provider.

This is valid for all strings, so they can be easily translated into different languages and loaded on demand for the entire app.

You can see it in action in this demo, where the text of the clear button is changed. https://www.telerik.com/kendo-react-ui/components/dropdowns/globalization/

Even if you don't need to translate to another language, you can still override the english messages the same way.

[MirAlbertioni]

Hi, thanks!

This is how I solved it in case others wonder.

import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';

const kendoTranslations = {
    "dropdowns": {
        "nodata": Globalization.NoData,
        "clear": Globalization.Clear
    }
};

loadMessages(kendoTranslations, 'translation');

<LocalizationProvider language="translation" >
<MultiSelect
                                className="col-9"
                                data={defaultStatuses}
                                onChange={this.onChange}
                                textField="text"
                                dataItemKey="id"
                                placeholder={Globalization.SelectStatus}
                                value={this.state.selectedStatuses}
                                autoClose={false}
                            />
</LocalizationProvider>