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 in Angular Report Viewer. This approach allows the selection of date and time for the DateTime report parameters.

Solution

Telerik kendoDateTimePicker widget is not included in the Kendo UI JavaScript distributed by Telerik Reporting through telerikReportViewer.kendo-x.x.x.min.js file, or kendo.subset.2015.3.930.min.js in 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.

Also, you need to make sure that Kendo all is loaded after jQuery. Because of that, we will use a special logic that sets the visibility of the viewer after Kendo all is loaded:

1. In the initializaion of the viewer, specify the parameterEditors option.

   <tr-viewer #viewer1 *ngIf="visible"
       [containerStyle]="viewerContainerStyle"
       [serviceUrl]="'http://localhost:59654/api/reports/'"
       [reportSource]="{
           report: 'MyReport.trdp',
           parameters: {}
       }"
       [parameterEditors]="[{
           match: match,
           createEditor: createEditor
       }]"
   </tr-viewer>
   

2. Then in the app.component.ts implement the createEditor function. You see that we set the visibility of the viewer to True once kendo.all.min.js is loaded:

   export class AppComponent implements OnInit {
       @ViewChild('viewer1', { static: false }) viewer: TelerikReportViewerComponent;
   
       private visible: boolean = false;
       ...
   
       ngOnInit() {
           this.loadScript("http://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js")
               .then(() => {
                   this.visible = true;
               });
       }
   
       ...
       match(parameter) {
           return parameter.type === "System.DateTime";
       }
   
       createEditor (placeholder, options){
           var dateTimePicker = $(placeholder).html('<input type="datetime"/>'),
               parameter,
               valueChangedCallback = options.parameterChanged,
               dropDownList;
   
           function onChange() {
               var val = dropDownList.value();
               valueChangedCallback(parameter, val);
           }
   
           return {
               beginEdit: function (param) {
   
                   parameter = param;
   
                   $(dateTimePicker).find("input").kendoDateTimePicker({
                       dataTextField: "name",
                       dataValueField: "value",
                       value: parameter.value,
                       dataSource: parameter.availableValues,
                       change: onChange
                   });
   
                   dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker");
               }
           };
       }
   }
   

See Also

• KendoDateTimePicker)
• Angular Report Viewer
• Report parameters