Set DatePicker Culture in MVC Report Viewer

Environment

Product

Progress® Telerik® Reporting

Description

The culture of the Kendo widgets, such as the Kendo DatePicker is controlled outside of the HTML5-based Report Viewers and must be set separately.

This KB article gives a brief description of how to set up the Kendo widgets to work with another language. The example will demonstrate the date representation in Spanish.

Solution

1. Add the required culture script to the page after loading jQuery and the Kendo subset of the Report Viewer as demonstrated in the example below:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer-kendo"></script>
   <script src="http://kendo.cdn.telerik.com/2022.3.913/js/cultures/kendo.culture.es-PY.min.js"></script>
   <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>
   

2. Then, the culture of the Kendo widget must be set through the kendo.culture function and it should be executed before the report viewer's initialization code:

   <script type="text/javascript">
       kendo.culture("es-PY");
   
           $("#reportViewer1")
               .telerik_ReportViewer({
                   serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
                   reportSource: {
                       report: "Employee Sales Summary.trdx",
                   }
               });
   </script>
   

Demo

A sample project can be found in our GitHub repository.

See Also

• Kendo UI for jQuery Internationalization Overview