This is a migrated thread and some comments may be shown as answers.

Angular report viewer date parameter localization

1 Answer 317 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 09 Apr 2020, 08:15 AM

Hi Sebastien,

The Angular Report Viewer is a wrapper of HTML5 Report Viewer widget that utilizes Kendo UI for jQuery components. To integrate Kendo UI components (datepicker) in Angular application you can use the steps from Kendo UI for jQuery Integration help article and Change the culture of Kendo DatePicker widget in the parameters area of the HTML5 Report Viewer kb article.

Here are the sample steps:

1. In the 'app.component.ts' import the components from Kendo and declare the 'kendo' object. Then in the AfterViewInit add the code for utilizing the corresponding culture:

...
import '@progress/kendo-ui';

declare var kendo: any;

...

export class AppComponent implements AfterViewInit {
    @ViewChild('viewer1', { static: false }) viewer: TelerikReportViewerComponent;

    ngAfterViewInit(): void {
        ...
        kendo.culture("fr-FR");
		...
    }

    title = "Report Viewer";
    viewerContainerStyle = {
        position: 'absolute',
        left: '5px',
        right: '5px',
        top: '40px',
        bottom: '5px',
        overflow: 'hidden',
        clear: 'both',
        ['font-family']: 'ms sans serif'
    };

    ...
}

2. Add the necessary Kendo scripts in the 'index.html' of the project:

<head>
  <meta charset="utf-8">
  <title>Telerik Angular Report Viewer Demo</title>
  <base href="/">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="http://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://kendo.cdn.telerik.com/2019.1.115/styles/kendo.blueopal.min.css" rel="stylesheet" />

  <script src="http://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2019.1.115/js/cultures/kendo.culture.fr-FR.min.js"></script>

</head>

Regards,
Katia
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.