Telerik Forums / KendoReact

localization not working in drawer container menu items

1 Answer 65 Views
Localization
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
Daniela asked on 03 Jun 2022, 08:21 AM

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);

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 07 Jun 2022, 07:33 AM

Hello Daniela,

The issue that you are facing is due to the fact that the useLocalization is not initialized in the context of LocalizationProvider. In this particular setup, you have access to the messages, so you can use them directly. The useLocalization should be used to pass the localization to inner components:

With the above in mind, if you use the LicalizatoinProvider to wrap the main component and then use internally the useLocalization, then you will be able to use the approach that you have in your example.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daniela
Top achievements
Rank 1
Iron
Iron
Iron
commented on 07 Jun 2022, 07:40 AM

I cannot wrap the items in the localiztion provider because it is part of the state and I cannot wrap state into that compoent, please provide an example localizing the drawer from telerik.

 

Thanks,

Konstantin Dikov
Telerik team
commented on 08 Jun 2022, 07:36 AM

Hi Daniela,

As I have mentioned, the useLocalization works in the context of LocalizationProvider, which means that if you want to use the useLocalization hook, it needs to be initialized in a component that is wrapped within a LocalizationProvider. Since the "items" collection in your example is in the state, the useLocalization will not have any effect, because it is outside of the LocalizationProvider context. 

With the above in mind, please wrap your inner content (including the "items" collection) in a nested component where you can use useLocalization in the context of the LocalizationProvider:

Daniela
Top achievements
Rank 1
Iron
Iron
Iron
commented on 08 Jun 2022, 08:24 AM

but I cannot put the state inside the render function right ? so I cannot wrap the items collection in a nested component. if yes, could you provide an example with items in such component please.
Konstantin Dikov
Telerik team
commented on 08 Jun 2022, 09:04 AM

Please refer to the example in my last reply, where I have introduced another component, where you can place the Drawer and the items (the items can be part of the state of that nested component).
Tags
Localization
Asked by
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or