Questions on KendoReact Forum

1 answer

42 views

Maintaining and updating translation files

I am aware there is https://github.com/telerik/kendo-react-messages, but the repo doesn't seem to be updated regularly with every new release.

So my question is: What is the best way to maintain translation files and where can I get complete json files for all components as it is documented in https://www.telerik.com/kendo-react-ui/components/grid/globalization/#toc-messages for example?

General Discussions

Localization

answered on 06 Nov 2023

1 answer

105 views

Issue with Spanish Characters in Kendo React PDF Processing

Dear Support Team,

I am currently utilizing your Kendo React PDF processing tool for my project. While the user interface displays Spanish characters correctly and clearly, the generated PDF reports do not mirror this accuracy. Instead, they seem to render different characters.

Your assistance in resolving this matter would be greatly appreciated.

I really appreciate any help you can provide.

UI

PDF

Localization

PDF Processing

answered on 05 Jul 2023

1 answer

101 views

Kendo React Localization for charts

In below chart I am trying to make all text to show in localized format. Values on category axis and values on tooltip also needs in localized.
Is there any way to convert numbers into localized format or I need to pass localized numbers and text as chart values

Charts

Localization

answered on 14 Feb 2023

1 answer

58 views

gridColumn title localized

Hi all, i have the attached grid, in the title of the second column i wanna put a translated text that i pass to the page via props, if i put that text variable in another item (as <h1/>) the text is rendered correctly, when i put it in column title it gave me the error '"Cannot read properties of undefined (reading '''strings')".

so how can i put a translated text via parent variable in a child component into GridColumn title?

Grid

Localization

answered on 09 Dec 2022

1 answer

69 views

Localization messages

I would like to ask, where are the localization messages in Kendo React packages. In Kendo jQuery was translation mesages included in kendo-ui package, but in React, I'm not able to found the messages. ...or in Kendo React the messages are not available and I must create messages JSON object and translate by self?

Thanks a lot.

Localization

answered on 25 Oct 2022

1 answer

50 views

localization not working in drawer container menu items

Hello,

I am able to set the localization service to the message in english but when I change the dropdown value to spanish the message remains in english, do you have a workaround for this?

const DrawerContainer = (props: any) => {
constlocalizationService = useLocalization();
    const locales: LocaleInterface[] = [
        {
          language: "en-US",
          locale: "en",
          name: "English",
        },
        {
          language: "es-ES",
          locale: "es",
          name: "Spanish",
        },
        {
          language: "sv",
          locale: "sv",
          name: "Swedish",
        },
      ];
 const [currentLocale, setCurrentLocale] = React.useState(
        locales[0]
    );
  const [expanded, setExpanded] = React.useState(true);
  const [drawerExpanded, setDrawerExpanded] = React.useState(true);
  const [items, setItems] = React.useState([
    {
      text: localizationService.toLanguageString('custom.personalInfo', ''),
      route: '/profile'
    },
    {
      separator: true
    },
    {
      text: 'Sites',
      route: '/sites'
    },
    {
      separator: true
    },
    {
      text: 'My Compressed Air System',
      route: '/mycasystem'
    },
    {
      text: Array(25).fill('\xa0').join('') + 'Compressors',
      route: '/mypage'
    },
    /* {
      text: 'My Compressor',
      route: '/mycomp'
    }, {
      text: 'Compare',
      route: '/compare'
    },
    {
      text: 'Dashboard',
      route: '/dashboard'
    },
    {
      text: 'Customers',
      route: '/customers'
    } */
  ]);
 const selected = setSelectedItem(props.location.pathname);
return<div>
<LocalizationProvider language={currentLocale.language}>
            <IntlProvider locale={currentLocale.locale}>
<DropDownList
                                value={currentLocale}
                                textField="name"
                                onChange={(e) => {
                                    setCurrentLocale(e.target.value);
                                }}
                                data={locales}
                            />
          <div className="custom-toolbar">
        <Button icon="menu" onClick={handleClick}  />
        <span  className="title" id="burguer-menu">{localizationService.toLanguageString('custom.menu', '')}</span>
      </div>
    <Drawer expanded={expanded} position={'start'} mode={'push'} width={300} items={items.map(item => ({
      ...item,
      selected: item.text === selected
    }))} onSelect={onSelect}>
      <DrawerContent>
        {props.children}
      </DrawerContent>
</Drawer>
            </IntlProvider>
          </LocalizationProvider>
  </div >;
};
export default withRouter(DrawerContainer);

Localization

answered on 07 Jun 2022

1 answer

108 views

localization of label that only accepts strings not working

Hello,

I am trying to localize the following snippet of code.

  const [steps, setSteps] = React.useState<Array<stepsInterface>>([
    { label: {localizationService.toLanguageString('custom.AddCompressor', '')}, isValid: undefined },
    { label: 'Add properties', isValid: undefined }
  ]);

The problem is that label only accepts strings and throws an error, hence the localization does not work, some help would be appreciated.

Kind regards

Daniela

Localization

answered on 26 May 2022

1 answer

47 views

Localization of Title

Hello,

I am trying to localize my entire application but I cannot get this example working; https://www.telerik.com/kendo-react-ui/components/intl/l10n/reacting-to-language-changes/

My code is below.

import { Message } from '../../common/Message';

loadMessages(messages["es"], "es");
const DetailComponent = (props: any) => {
    const locales: LocaleInterface[] = [
        {
          language: "en-US",
          locale: "en",
        },
        {
          language: "es-ES",
          locale: "es",
        },
      ];
    const [currentLocale, setCurrentLocale] = React.useState<LocaleInterface>(
        locales[0]
    );

const defaultMessages = {
  [yesterdaysMessageKey]: "Yesterday was a good day!",
  [todaysMessages]: "Today is a good day as well!",
  [tomorrowsMessageKey]: "Tomorrow will be even better!",
};
return (
<LocalizationProvider language={currentLocale.language}>
<IntlProvider locale={currentLocale.locale}>

<p>
 <strong> <Message messageKey={yesterdaysMessageKey} defaultMessage={defaultMessages[yesterdaysMessageKey]}/>:</strong> {dataItem.nickname}
</p>
</IntlProvider>
</LocalizationProvider>
  );
};
 
import * as React from "react";
import { useLocalization } from "@progress/kendo-react-intl";
interface MessageProps {
  messageKey: string;
  defaultMessage: string;
}
export const Message = (props: MessageProps) => {
  const localization = useLocalization();
  return (
    <span style={{ display: "block" }}>
      {localization.toLanguageString(props.messageKey, props.defaultMessage)}
    </span>
  );
};
 
export interface LocaleInterface {
    language: string;
    locale: string;
  }
  

Localization

answered on 17 May 2022

1 answer

258 views

Is it possible to override the local when using intl.formatNumber

I was wondering if it was possible to override the locale used when using formatNumber with the IntlProvider. In the kendo-intl repo it seems you are able to do the below: