Grid Details not using IntlProvider locale

[Maurizio]

Hi,

I'm using Kendo React Grid with a row details component.

I'm facing an issue,numbers in details component are in wrong format (english), in grid are ok (italian).

How can i set locale in details component?

Here's my code:

 

                   <Grid
                        sortable={true}
                        pageable={{ info: true, pageSizes: [10, 20, 50, 100, 200] }}
                        {...this.state.dataState}
                        {...this.state.odaData}
                        detail={this.detailComponent(this.reload)}
                        expandField="expanded"
                        onExpandChange={this.expandChange}
                        onDataStateChange={this.dataStateChange}
                        resizable
                        editField="selected">

....

 

    detailComponent = (reload: () => void) => (props: GridDetailRowProps) => {
        return (
            <EntrataMerciDetail {...props} Reload={reload} />
        );
    }

 

 

 

 

[Stefan]

Hello, Maurizio,

Please ensure that the IntlProvider is set on a top-level.

I made an example with a Grid with suing a detailed Grid and the culture formating was set as expected on the detail Grid as well:

https://stackblitz.com/edit/react-a1b4zz?file=app%2Fmain.jsx

If the issue still occurs, please share a runnable example reproducing the issue and I will be happy to assist further.

Regards,
Stefan
Progress Telerik

[Maurizio]

Hi Stefan,

thanks for the quick response.

Dates seems to work but numbers aren't working in your example as well.

Spanish numbers should have comma as decimal separator (like italian) but they are formatted in english.

see attached file.

Maurizio

 

 

 

 

[Stefan]

Hello, Maurizio,

This occurs because the number column has no number format set.

When setting the same format on the number columns inside the main and the detail Grid, the culture format was correctly changed.

This is the updated example:

https://stackblitz.com/edit/react-a1b4zz?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

[Maurizio]

Thanks Stefan! Now grid is working

One last thing, when I "manually" format a number I get the english version, my code is:

provideIntlService(this).formatNumber(qtaResidua, "n")

qtaResidua has type : number.

In others component this is working fine but not in details

I've forked your example:

https://stackblitz.com/edit/react-a1b4zz-fchcgu?file=app/main.jsx

 

Maurizio

[Maurizio]

I've solved it by myself, in this way:

import * as React from 'react';
import { registerForIntl, provideIntlService } from '@progress/kendo-react-intl';

interface INumberFormatterProps {
    numero?: number;
}

export class NumberFormatter extends React.Component<INumberFormatterProps, {}> {
    render() {
        return (
            <span> {this.props.numero && provideIntlService(this).formatNumber(this.props.numero, "n")} </span>
        );
    }
}

registerForIntl(NumberFormatter);

 

 

Thanks again Stefan!