Grid Details not using IntlProvider locale

6 posts, 1 answers
  1. Maurizio
    Maurizio avatar
    5 posts
    Member since:
    May 2016

    Posted 22 Jan 2020 Link to this post

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

     

     

     

     
  2. Stefan
    Admin
    Stefan avatar
    3009 posts

    Posted 22 Jan 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Maurizio
    Maurizio avatar
    5 posts
    Member since:
    May 2016

    Posted 22 Jan 2020 Link to this post

    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

     

     

     

     
  4. Answer
    Stefan
    Admin
    Stefan avatar
    3009 posts

    Posted 23 Jan 2020 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Maurizio
    Maurizio avatar
    5 posts
    Member since:
    May 2016

    Posted 23 Jan 2020 Link to this post

    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


  6. Maurizio
    Maurizio avatar
    5 posts
    Member since:
    May 2016

    Posted 23 Jan 2020 in reply to Maurizio Link to this post

    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!

Back to Top