Using KendoDateTimePicker in the Angular Report Viewer

Environment

Product	Progress® Telerik® Reporting
Project Type	Angular
Report Viewer	Angular Report Viewer

Description

This article describes how to use the KendoDateTimePicker as a custom parameter editor for the Angular Report Viewer.

This approach allows the selection of date and time for the DateTime Report Parameters that do not have available values.

Solution

The kendoDateTimePicker widget is not included in the Kendo UI JavaScript distributed by Telerik Reporting through the telerikReportViewer.kendo.min.js file, or kendo.subset.2015.3.930.min.js and older versions. For that reason, you will have to replace the Kendo UI subset with the full Kendo UI JavaScript e.g. kendo.all.min.js.

1. In the initializaion of the report viewer,{component}.html, specify the parameterEditors option.

   <tr-viewer #viewer1 *ngIf="visible"
       [containerStyle]="viewerContainerStyle"
       [serviceUrl]="'https://demos.telerik.com/reporting/api/reports/'"
       [reportSource]="{
           report: 'Product Line Sales.trdx',
           parameters: {}
       }" 
       [parameterEditors]="[{
           match: match,
           createEditor: createEditor
       }]" >
   </tr-viewer>
   

2. Then in the {component}.ts implement the match and createEditor functions. The visibility of the report viewer can be set to true once kendo.all.min.js is loaded:

   export class AppComponent implements OnInit {
   
       @ViewChild('viewer1', { static: false }) viewer: TelerikReportViewerComponent;
       public visible: boolean = false;
   
       ngOnInit(): void {
           this.loadScript("http://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js")
           this.visible = true;    
       }
   
       match(parameter) {
           return parameter.type === "System.DateTime";
       }
   
       createEditor (placeholder, options){
           let input = document.createElement('input');
           input.classList.add("trv-parameter-value");
           //@ts-ignore
           $(placeholder).parent().append(input);
           let dateTimePicker;
           let valueChangedCallback = options.parameterChanged;
           let parameter;
   
           function onChange(e) {
               //@ts-ignore
               var date = $(input).data("kendoDateTimePickerPicker");
               var val = date.value();
               valueChangedCallback(parameter, val);
           }
   
           return {
               beginEdit: function (param) {
                   parameter = param;
   
                   //@ts-ignore
                   $(input).kendoDateTimePicker({
                       value: param.value,
                       format: "dd/MM/yyyy",
                       change: onChange
                   });
   
                   //@ts-ignore
                   dateTimePicker = $(input).data("kendoDateTimePicker");
               }
           };
       }
   }
   

See Also

• KendoDateTimePicker
• Angular Report Viewer
• Report parameters